Les Bases Du HTML

Les bases du HTML
par Josselin Willette
Date de publication : 24 juillet 2009
Ce cours complet sur le HTML va vous permettre d'en apprendre les bases conformment aux recommandations et normes en vigueur tablies par le W3C. Il rpondra quasiment toutes les questions que vous pouvez vous poser sur ce langage. Je tiens remercier Kerod et Auteur qui m'ont conseill et accompagn tout au long de la rdaction de ce tutoriel et qui ont particip la relecture de cet article, ainsi que dourouc05, koopajah et RideKick pour leur relecture attentive. Des remarques ? Des questions ? N'hsitez pas, commentez cet article : .
Les bases du HTML par Josselin Willette
I - Introduction..............................................................................................................................................................4 I-A - Introduction au HTML.................................................................................................................................... 4 I-A-1 - Qu'est-ce que le HTML ?...................................................................................................................... 4 I-A-2 - Qu'est-ce qu'une balise HTML ?........................................................................................................... 4 I-A-2-a - Les balises simples.......................................................................................................................4 I-A-2-b - Les balises doubles...................................................................................................................... 4 I-A-2-c - Imbrication des balises................................................................................................................. 5 I-B - Structure d'un document HTML.....................................................................................................................5 I-C - Le DOCTYPE.................................................................................................................................................5 I-D - Les commentaires..........................................................................................................................................7 II - Le corps du document - body............................................................................................................................... 7 II-A - Les niveaux de titres.....................................................................................................................................7 II-B - Les paragraphes de texte.............................................................................................................................8 II-C - La mise en forme de texte........................................................................................................................... 8 II-C-1 - Le texte en gras................................................................................................................................... 8 II-C-2 - Le texte en italique...............................................................................................................................8 II-C-3 - Le texte soulign.................................................................................................................................. 8 II-C-4 - Le texte barr.......................................................................................................................................8 II-C-5 - Le texte en exposant........................................................................................................................... 9 II-C-6 - Le texte en indice.................................................................................................................................9 II-C-7 - Modifier la couleur du texte................................................................................................................. 9 II-C-8 - Modifier la police du texte....................................................................................................................9 II-C-9 - Modifier la taille du texte......................................................................................................................9 II-D - Les images et zones ractives...................................................................................................................10 II-D-1 - Les images......................................................................................................................................... 10 II-D-2 - Les zones ractives........................................................................................................................... 10 II-D-2-a - Les zones rectangulaires...........................................................................................................11 II-D-2-b - Les zones circulaires................................................................................................................. 11 II-D-2-c - Les zones polygonales.............................................................................................................. 12 II-E - Les liens hypertextes.................................................................................................................................. 12 II-E-1 - Les liens externes.............................................................................................................................. 12 II-E-2 - Les liens internes............................................................................................................................... 12 II-E-2-a - Les ancres................................................................................................................................. 13 II-E-2-b - Les liens vers d'autres cadres...................................................................................................13 II-E-3 - Les liens e-mails................................................................................................................................ 13 II-E-4 - Les protocoles.................................................................................................................................... 14 II-E-5 - Informations complmentaires............................................................................................................14 II-F - Les cadres...................................................................................................................................................15 II-F-1 - quoi servent-ils ?............................................................................................................................. 15 II-F-2 - Dbuter avec les cadres.................................................................................................................... 15 II-F-3 - Les cadres locaux...............................................................................................................................16 II-F-4 - Les cadres aujourd'hui....................................................................................................................... 17 II-G - Les listes.....................................................................................................................................................17 II-G-1 - Les diffrents types de listes............................................................................................................. 17 II-G-1-a - Les listes non ordonnes.......................................................................................................... 17 II-G-1-a-i - Les diffrents types de puces............................................................................................ 18 II-G-1-a-ii - Les puces en image..........................................................................................................18 II-G-1-b - Les listes ordonnes................................................................................................................. 19 II-G-1-b-i - Les diffrents types de numrotation.................................................................................19 II-G-1-b-ii - Modifier le dbut de la numrotation................................................................................ 21 II-G-1-c - Les listes de dfinitions............................................................................................................. 21 II-G-1-d - Les listes de rpertoires............................................................................................................ 21 II-G-1-e - Les listes de menus.................................................................................................................. 22 II-G-2 - Les listes imbriques......................................................................................................................... 22 II-G-3 - L'utilit des listes aujourd'hui............................................................................................................. 23 II-H - Les tableaux................................................................................................................................................23 II-H-1 - quoi servent-ils ?.............................................................................................................................23 II-H-2 - Du tableau simple au tableau complexe............................................................................................23
-2Copyright 2009 Josselin Willette. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.
http://j-willette.developpez.com/tutoriels/html/les-bases-du-html/
II-H-2-a - Les bases d'un tableau............................................................................................................. 23 II-H-2-b - Le titre d'un tableau...................................................................................................................25 II-H-2-c - La ligne d'en-tte d'un tableau.................................................................................................. 25 II-H-2-d - Les diffrentes parties d'un tableau.......................................................................................... 26 II-H-2-e - La fusion de lignes et de colonnes d'un tableau....................................................................... 26 II-H-3 - L'utilit des tableaux aujourd'hui........................................................................................................ 28 II-I - Les formulaires............................................................................................................................................. 28 II-I-1 - quoi servent-ils ?.............................................................................................................................. 28 II-I-2 - La balise form...................................................................................................................................... 28 II-I-3 - Les champs texte monolignes............................................................................................................. 29 II-I-4 - Les champs texte multilignes.............................................................................................................. 29 II-I-5 - Les champs cachs............................................................................................................................. 29 II-I-6 - Les champs de fichiers........................................................................................................................30 II-I-7 - Les boutons radio................................................................................................................................ 30 II-I-8 - Les cases cocher............................................................................................................................. 31 II-I-9 - Les boutons......................................................................................................................................... 31 II-I-9-a - Le bouton simple.........................................................................................................................31 II-I-9-b - Le bouton d'envoi........................................................................................................................31 II-I-9-c - Le bouton image..........................................................................................................................32 II-I-9-d - Le bouton effacer........................................................................................................................ 32 II-I-10 - Les listes............................................................................................................................................ 32 II-I-11 - Amliorez l'accessibilit de vos formulaires.......................................................................................33 III - L'entte du document - head..............................................................................................................................34 III-A - Le titre........................................................................................................................................................ 34 III-B - Les scripts.................................................................................................................................................. 34 III-B-1 - Les scripts externes.......................................................................................................................... 34 III-B-2 - Les scripts internes........................................................................................................................... 34 III-C - Les styles................................................................................................................................................... 35 III-C-1 - Les styles externes........................................................................................................................... 35 III-C-2 - Les styles internes............................................................................................................................ 35 III-D - Les meta.................................................................................................................................................... 36 III-D-1 - quoi servent-elles ?........................................................................................................................36 III-D-2 - La balise meta content-type..............................................................................................................36 III-D-3 - Ajoutez des infos sur vous................................................................................................................36 III-D-4 - Ajoutez des infos sur votre site........................................................................................................ 37 III-D-5 - Ajoutez des infos sur la cration...................................................................................................... 38 III-D-6 - Orientez les robots............................................................................................................................ 39 III-D-7 - Orientez les visiteurs.........................................................................................................................39 III-D-8 - Plus encore....................................................................................................................................... 39 IV - Aller plus loin...................................................................................................................................................... 42 IV-A - Le XHTML..................................................................................................................................................42 IV-B - Le CSS...................................................................................................................................................... 42 IV-C - Le rfrencement...................................................................................................................................... 42 IV-D - Et encore plus........................................................................................................................................... 42
I - Introduction I-A - Introduction au HTML I-A-1 - Qu'est-ce que le HTML ?

HTML (HyperText Markup Language) est un format de prsentation de donnes permettant de crer des pages web pouvant tre lues dans des navigateurs. C'est un langage de description de donnes, et non un langage de programmation. Il est fig c'est--dire qu'une fois le document charg dans le navigateur, il ne rpond aucune action de l'utilisateur sur le contenu de la page. Ce langage est pourvu d'un systme de balisage qui va permettre de structurer notre document. Le
I-A-2 - Qu'est-ce qu'une balise HTML ?

Une balise HTML est un lment que l'on va ajouter au texte de dpart pour dire au navigateur de quelle manire l'afficher. Elle n'est pas affiche telle quelle dans le navigateur, elle est interprte par celui-ci. Elle est toujours dlimite par les signes < et >. Exemple de balise
<html>
Une balise peut en plus comporter de zro plusieurs attributs. Les attributs sont des informations complmentaires qui la caractrisent. Ils se prsentent sous la forme nomattribut="valeur". Attention ne pas confondre un attribut HTML et une proprit CSS ! Exemple de balise et son attribut
<html lang="fr">
Chaque balise ouverte doit tre ferme, cependant il existe des exceptions. On distingue deux types de balises : Les balises simples. Les balises doubles.
I-A-2-a - Les balises simples

Ce sont des balises qui sont dites "vides", c'est--dire qu'elles ne vont contenir aucune autre balise HTML. Ces balises n'ont pas besoin d'tre fermes. Exemple de balise simple
<img src="adresse/de/l/image">
Si ces balises n'ont pas besoin d'tre fermes en HTML, a devient faux en XHTML. Cf : Les balises vides en XHTML.
I-A-2-b - Les balises doubles

Les balises doubles sont dites ouvrantes/fermantes, c'est--dire qu'elles ncessitent deux balises, une ouvrante et une fermante dans lesquelles on va pouvoir mettre d'autres balises ou du texte. La balise fermante est identique la balise ouvrante, la diffrence qu'elle contient un "/" pour indiquer quel endroit on la ferme.
Exemple de balise double
<p>Ici du texte ou tout autre balise.</p>
I-A-2-c - Imbrication des balises

Lorsque l'on cumule l'criture de plusieurs balises ouvrantes (forcment invitable), il est impratif de respecter la hirarchie des balises, c'est--dire que la premire ouverte sera la dernire tre ferme. Le chevauchement des balises est une grave erreur. Exemple de balises imbriques
<b><u>Ici les balises sont correctement imbriques.</u></b>
Exemple de balises chevauches Commentez l'article :
<b><u>Ici les balises ne sont</b> pas correctement imbriques, c'est une erreur.</u>
I-B - Structure d'un document HTML

Avant de commencer tout dveloppement, il est important de connatre la structure d'une page HTML. Commenons donc par voir celle-ci avec la structure minimale obligatoire d'une page qui sera notre base de travail tout au long de ce tutoriel : Document HTML de base
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <body>  </body> </html>
La premire ligne du document s'appelle le DOCTYPE. C'est une balise indispensable pour conserver la compatibilit du rendu de votre page sur les diffrents navigateurs modernes. Aprs le DOCTYPE, vient la balise <html>. Elle encadre l'ensemble des autres balises. La balise <html> contient deux grandes balises : <head>, qui va contenir tout l'en-tte de la page et <body> qui va contenir tout le corps du document. Si vous incluez des pages l'aide d'un langage serveur (PHP, ASP, JSP...), ayez toujours en tte que le DOCTYPE, la balise <html> ainsi que les balises <head> et <body> sont uniques dans une page. Si tel n'est pas le cas dans votre code source, vous aurez de mauvaises surprises l'affichage de votre site. Commentez l'article :
I-C - Le DOCTYPE
quoi sert ce fameux DOCTYPE ? Est-il vraiment utile ? Oui, il est utile, mme trs utile. Il sert d'une part dclarer quel "langage", "grammaire", ou norme on applique notre page. Cette dclaration nous permet de soumettre nos pages au validateur du W3C (World Wide Web Consortium) qui vrifie que notre code
HTML ne comporte aucune erreur de syntaxe (balises mal fermes, utilisation d'attributs inexistants...) en fonction du DOCTYPE, donc de la DTD (Document Type Definition) choisie. D'autre part, il indique au navigateur de quelle manire interprter telle balise, telle proprit CSS. L'absence de cette balise est appele le mode Quirks, ou non conforme, alors qu'au contraire, la prsence de cette balise est appele le mode Standard, ou conforme. Pour vous faire une ide de son importance, en mode Quirks, le modle de bote Microsoft ne calcule pas de la mme manire la taille d'un bloc que le modle W3C, lorsque celui-ci a des marges intrieures (padding), voire mme des bordures. Une illustration vous montrera le rsultat des deux modles de bote en mode Quirks :
Si vous pensez que c'est le modle Microsoft qui ragit de la bonne manire, alors dtrompez-vous. Il vous suffit de rajouter le DOCTYPE en premire ligne pour vous rendre compte que ce n'est pas le navigateur qui respecte le modle W3C qui va changer de comportement, mais bien celui qui utilise le modle Microsoft. Et l'URL sur la ligne du DOCTYPE, est-elle vraiment utile, elle ?
La rponse est encore une fois : oui. Vous pouvez certes faire valider vos pages sur le site du validateur du W3C sans l'URL, mais son oubli a la fcheuse tendance faire passer Internet Explorer en mode Quirks, ce qui anantira tous vos efforts de compatibilit entre les diffrents navigateurs. Plus d'infos sur les DTD (Document Type Definition). Vous pouvez choisir votre DOCTYPE parmi quelques-uns en fonction de votre degr de rigueur et/ou vos besoins. Une liste non exhaustive est disponible dans la FAQ (X)HTML. Commentez l'article :
I-D - Les commentaires

Les commentaires permettent de laisser des informations ou des descriptions du code et sont utilisables n'importe quel endroit de votre document. Cependant, ce ne sont pas ces commentaires-l qu'il faudra utiliser pour les langages JavaScript et CSS qui possdent leur propre systme de commentaires. Ces commentaires ne seront pas affichs dans le navigateur mais ils resteront prsents dans le code source, donc il faut tout prix viter de mettre des informations confidentielles dedans. Ils sont dlimits par  et peuvent tre multilignes. Par souci de compatibilit entre les navigateurs et de mal interprtation de ceux-ci, il est fortement dconseill d'crire deux tirets d'union (ou plus) conscutifs. Commentaires HTML
  
Commentez l'article :
II - Le corps du document - body

C'est dans la balise <body> que nous allons mettre tout le texte et toutes les images qui apparatront lorsqu'un visiteur viendra sur notre page.
II-A - Les niveaux de titres

Il existe diffrents niveaux de titres, ils vont de 1 6 et ont chacun leur importance. La balise reprsentant ces niveaux de titre est <hX> o X reprsente le niveau. Exemple : Exemple de titre
<h1>Titre de ma page</h1>
Il est important de respecter la hirarchie des diffrents niveaux de titres, sachant que l'lment le plus haut est le <h1>. En effet, un titre <h2> ne se retrouvera jamais au-dessus d'un <h1> dans un document. Le titre <h1> tant le plus important, il convient galement de ne le faire apparatre qu'une seule fois dans un document. Vous ne devez pas choisir un titre pour le rendu qu'il a dans le navigateur (diffrent selon les navigateurs et pouvant tre modifi l'aide de CSS), mais bien pour le niveau hirarchique qu'il reprsente. Commentez l'article :
II-B - Les paragraphes de texte

Comme vous tapez du texte dans un traitement de texte, vous segmentez votre texte en paragraphes. En HTML c'est la mme chose, sauf qu'il faut prciser nous-mme o commence un paragraphe et o il se termine. C'est ce quoi sert la balise <p>. Les paragraphes de texte en HTML
<p>Voici un premier paragraphe.</p> <p>Voici un deuxime paragraphe.</p>
II-C - La mise en forme de texte

Les diffrentes techniques cites ci-dessous pour mettre en forme du texte sont obsoltes. Si elles fonctionnent encore en HTML 4.01, il vaut mieux s'en sparer et les remplacer par un langage fait pour a et beaucoup plus puissant : le CSS. Voir : - Les cours sur le CSS - Un exemple d'une feuille de style de base
II-C-1 - Le texte en gras

Pour mettre le texte en gras on l'encadre de la balise <b> : Texte en gras
<b>Ce texte s'affichera en gras.</b>
II-C-2 - Le texte en italique

Pour mettre le texte en italique on l'encadre de la balise <i> : Texte en italique
<i>Ce texte s'affichera en italique.</i>
II-C-3 - Le texte soulign

Pour souligner le texte on l'encadre de la balise <u> : Texte soulign
<u>Ce texte sera soulign.</u>
II-C-4 - Le texte barr

Pour barrer le texte on l'encadre de la balise <s> : Texte barr
<s>Ce texte sera barr.</s>
II-C-5 - Le texte en exposant

Pour placer le texte en exposant on l'encadre de la balise <sup> : Texte en exposant
<sup>Ce texte sera en exposant.</sup>
II-C-6 - Le texte en indice

Pour placer le texte en indice on l'encadre de la balise <sub> : Texte en indice
<sub>Ce texte sera en indice.</sub>
II-C-7 - Modifier la couleur du texte

Pour modifier la couleur du texte on utilise l'attribut color de la balise <font> : Texte en rouge
<font color="#ff0000">Ce texte sera en rouge.</font>
Les couleurs peuvent tre crites de deux manires : En hexadcimal de type RVB et prcdes d'un dise (#) ; Exemples : #ff0000 => rouge, #00ff00 => vert, #0000ff => bleu. Textuelles en anglais US ; Exemples : red, yellow, pink.
II-C-8 - Modifier la police du texte

Pour modifier la police du texte on utilise l'attribut face de la balise <font> : Texte en verdana
<font face="verdana">Ce texte sera en verdana.</font>
On a tendance crire des familles de polices plutt qu'une seule police. En effet, il se peut que sur un systme diffrent du vtre la police choisie ne soit pas installe et il faut qu'il puisse alors afficher le texte dans une police proche de celle que vous vouliez avoir. On spare alors les diffrentes polices par une virgule dans l'ordre de slection le cas o la prcdente ne peut pas tre affiche. Texte en verdana ou sans-serif
<font face="verdana,sans-serif">Ce texte sera en verdana ou en sans-serif si verdana n'est pas installe.</font>
II-C-9 - Modifier la taille du texte

Pour modifier la taille du texte on utilise l'attribut size de la balise <font> : Texte en taille 5
<font size="5">Ce texte sera en taille 5.</font>
Par dfaut, la valeur de l'attribut size vaut "3". Il y a deux manires de modifier la valeur de cet attribut : et les valeurs possibles sont les entiers de "1" "7".
En absolu : Les valeurs possibles sont les entiers de "1" "7". En relatif : Les valeurs possibles les entiers de "-2" "+4".
Et il est bien videmment possible de renseigner ces trois attributs (color, face, size) la fois dans la mme balise <font>. Commentez l'article :
II-D - Les images et zones ractives II-D-1 - Les images

Pour afficher une image en HTML, on utilise la balise <img>. Elle admet diffrents attributs, dont les plus importants sont src et alt. L'attribut src permet de renseigner le chemin de l'image, qui peut tre absolu HTTP ou relatif, trs utile pour pouvoir l'afficher. L'attribut alt affiche un texte alternatif la place de l'image dans le cas o, pour une raison ou autre, celle-ci ne peut pas tre charge. Il aide de plus les moteurs de recherche rfrencer l'image et les dficients visuels savoir ce que l'image reprsente. Afficher une image
<img src="adresse/de/l/image" alt="Description de l'image">
L'attribut alt n'est pas cens crer une infobulle lors du survol de l'image, qui est le rle de l'attribut title, cependant sur Internet Explorer le alt affiche cette infobulle. Les diffrents formats d'image supports par cette balise sont : GIF JPG PNG BMP ( viter)
II-D-2 - Les zones ractives

Le HTML permet de crer des zones ractives sur les images, afin de dfinir plusieurs liens diffrents sur une seule et mme image, ou de ne rendre qu'une seule partie de l'image cliquable. On appelle l'ensemble de ces zones une carte, ou map. Les balises qui permettent de faire ces zones ractives sont <map> et <area> troitement lies avec la balise <img>. En effet, on doit forcment prciser sur quelle image ces zones vont tre prsentes. L'attribut de la balise <img> qui va contenir le nom de la map dont elle fait rfrence est usemap. Le nom de cette map est prcd du signe dise (#). Image mappe
<img src="adresse/de/l/image" alt="Description de l'image" usemap="#nomDeLaMap">
La balise qui va contenir l'ensemble de nos zones ractives pour cette image est la balise <map>, qui doit obligatoirement avoir l'attribut name renseign et qui aura pour valeur le nom de la map, le mme renseign dans l'attribut usemap de notre image. Comme vous l'aurez sans doute devin et comme son nom l'indique, la balise <area> sera une zone ractive dans notre map. Il y a une balise area par zone. Structure d'une map
<map name="nomDeLaMap">  <area ...>
- 10 Copyright 2009 Josselin Willette. Aucune reproduction, mme partielle, ne peut tre faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu' trois ans de prison et jusqu' 300 000 de dommages et intrts. Cette page est dpose la SACD.
Structure d'une map

<area ...> </map>
Les diffrents attributs de la balise <area> ncessaires son bon fonctionnement sont : coords, qui va contenir les diffrentes coordonnes de notre zone. href, qui va dfinir l'adresse de destination du lien. shape, qui va renseigner le type de zone que l'on souhaite afficher.
On distingue trois types de zones : Les zones rectangulaires, Les zones circulaires, Les zones polygonales.
On peut bien videmment avoir autant de zones que l'on veut sur une map, et on peut galement combiner les diffrents types de zones sur une seule et mme image. Attention toutefois ne pas faire se chevaucher les zones ! Le cas chant, c'est la zone dfinie la premire qui s'affichera au-dessus.
II-D-2-a - Les zones rectangulaires

Pour dfinir une zone rectangulaire, l'attribut shape doit prendre pour valeur "rectangle" ou "rect". Les coordonnes dfinies dans l'attribut coords se rfrent aux abscisses et ordonnes des coins suprieur gauche et infrieur droit du rectangle que l'on souhaite tracer par rapport au coin haut gauche de l'image. Ces valeurs sont spares par une virgule et exprimes en pixels. Syntaxe : Zone rectangulaire Exemple : Zone rectangulaire Voir le rsultat
<area shape="rect" coords="x1,x2,y1,y2" href="adresse/de/destination">
<area shape="rect" coords="10,50,60,60" href="adresse/de/destination">
II-D-2-b - Les zones circulaires

Une zone circulaire est dfinie par la valeur "circle" ou "circ" de l'attribut shape. Les valeurs de l'attribut coords se rfrent aux abscisse et ordonne du centre du cercle ainsi que le rayon de ce cercle par rapport au coin haut gauche de l'image. Ces valeurs sont spares par une virgule et exprimes en pixels. Syntaxe : Zone circulaire Exemple : Zone circulaire
<area shape="circ" coords="x,y,rayon" href="adresse/de/destination">
<area shape="circ" coords="40,40,10" href="adresse/de/destination">
Voir le rsultat
II-D-2-c - Les zones polygonales

C'est la valeur "polygon" ou "poly" de l'attribut shape qui permet de dfinir une zone polygonale. Les valeurs de l'attribut coords se rfrent aux abscisse et ordonne de chacun des points par rapport au coin haut gauche de l'image. Ces valeurs sont spares par une virgule et exprimes en pixels. Syntaxe : Zone polygonale Exemple : Zone polygonale
<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn" href="adresse/de/destination">
<area shape="poly" coords="0,0,40,50,78,101,17,150" href="adresse/de/destination">
Voir le rsultat Commentez l'article :
II-E - Les liens hypertextes

Un lien hypertexte est un lement HTML permettant d'envoyer le visiteur vers une nouvelle page. On peut insrer dans cet lment toute sorte de textes, images et autres balises dites "inline" (comme les balises <span>, <strong>, etc). Un lien sera reprsent dans le code par la balise <a>. Tout ce qui sera dans cette balise fera office de lien. L'adresse de destination doit se trouver dans l'attribut href. L'attribut title, quant lui, permet de renseigner un petit descriptif sur le contenu de la page cible, et est un atout non nligeable en matire de rfrencement et d'accessibilit. Exemple texte : Exemple d'un lien texte Exemple image : Exemple d'un lien image
<a href="adresse/de/destination.html">Texte du lien</a>
<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif"></a>
On distingue deux types de liens, les liens externes et les liens internes.
II-E-1 - Les liens externes

Un lien externe est un lien hypertexte qui renvoie vers une autre page. Cette autre page peut tre une page de votre site ou celle d'un site tiers.
II-E-2 - Les liens internes

Un lien interne est un lien qui renvoie vers la mme page, mais pas forcment au mme endroit de la page. Attention ne pas confondre "liens internes" avec "lien interne au site" ! Un lien interne au site est en gnral un lien externe la page.
II-E-2-a - Les ancres

Les ancres permettent de naviguer l'intrieur d'une mme page. Par exemple, ce tutoriel a en haut un sommaire avec des liens qui renvoient plus bas dans la page, ce sont des ancres. Pour faire une ancre, il faut utiliser le signe dise (#) suivi d'un mot-clef. Ce mot-clef sera repris dans l'attribut id d'une balise laquelle on fait faire une ancre : Exemple d'une ancre interne
[...] <h2 id="motClef">Texte vers lequel l'ancre est renvoye</h2>
<a href="#motClef">Texte de mon ancre</a>
Si vous voulez faire une ancre vers une page externe, il vous suffit de rajouter l'adresse de destination dans la balise de lien : Exemple d'une ancre externe
<a href="adresse/de/destination.html#motClef">Texte de mon ancre</a>
II-E-2-b - Les liens vers d'autres cadres

Si vous utilisez des cadres pour votre navigations, vous aurez certainement envie que les liens de votre menu, dans le cadre nomm "cadreMenu" par exemple, pointent vers votre cadre principal que l'on appellera "cadrePrincipal". Dans ce cas, il faut renseigner l'attribut target de la balise de lien : Exemple d'un lien vers un autre cadre
<a href="adresse/de/destination.html" target="cadrePrincipal">Lien de mon menu</a>
Il existe plusieurs valeurs pour l'attribut target : Valeur Description Affichage dans le cadre courant (par dfaut). Ouvre le lien dans une nouvelle fentre. Affichage dans la totalit de la fentre courante. Affichage dans le cadre qui enveloppe la structure courante. Affichage dans le cadre spcifi.
_self _blank _top _parent NomDuCadre
Pour plus d'infos sur les cadres, reportez-vous la section "Les cadres".
II-E-3 - Les liens e-mails

Vous pouvez permettre vos visiteurs d'crire sur votre adresse e-mail avec la syntaxe "mailto:" : Exemple d'un lien vers une adresse e-mail
<a href="mailto:jwillette@monsite.com">Ecrivez-moi</a>
Ce type de liens ouvre le logiciel de messagerie par dfaut de vos visiteurs. Vous pouvez aussi renseigner un sujet par dfaut de l'e-mail, ainsi qu'un corps voire mme les deux :
Exemple d'un lien vers une adresse e-mail avec un sujet par dfaut
<a href="mailto:jwillette@monsite.com?subject=Sujet du mail">Ecrivez-moi</a>
Exemple d'un lien vers une adresse e-mail avec un corps par dfaut
<a href="mailto:jwillette@monsite.com?body=Corps du mail">Ecrivez-moi</a>
Exemple d'un lien vers une adresse e-mail avec un sujet et un corps par dfaut
<a href="mailto:jwillette@monsite.com?subject=Sujet du mail&body=Corps du mail">Ecrivez-moi</a>
Vous pouvez enfin mettre plusieurs destinataires ou mettre une personne en copie du mail : Exemple d'un lien vers plusieurs adresses e-mail
<a href="mailto:destinataire1@monsite.com;destinataire2@monsite.com">Ecrivez-nous</a>
Exemple d'un lien vers une adresse e-mail et une autre en copie
<a href="mailto:destinataire1@monsite.com?cc=destinataire2@monsite.com">Ecrivez-nous</a>
II-E-4 - Les protocoles

Un protocole est un moyen qu'ont deux ordinateurs de communiquer. Il diffre selon le type de donnes echanges. Il existe de nombreux protocoles disponibles par lien hypertexte, en voici une liste non exhaustive : Protocole HTTP HTTPS Signification de l'acronyme HyperText Transfer Protocol HyperText Transfer Protocol Secured Description Syntaxe utilise <a href="http://...">...</ a> <a href="https://...">...</ a>
SMTP FTP NNTP TELNET IRC
Permet de transfrer des donnes sur l'Internet. Permet de transfrer des donnes sur l'Internet en permettant de vrifier l'identit du site grce un certificat d'authentification. Simple Mail Transfer Permet de transfrer des Protocol e-mails. File Transfer Protocol Permet de transfrer des fichiers. Networks News Transfer Permet de lire, Protocol distribuer, ... les news de newsgroups. Permet d'accder un ordinateur distant. Internet Relay Chat Permet de se connecter un serveur de Chat.
<a href="mailto:...">...</ a> <a href="ftp://...">...</a> <a href="news:...">...</ a> <a href="telnet://...">...</ a> <a href="irc://...">...</a>
II-E-5 - Informations complmentaires

Pour viter d'avoir le cadre bleu autour d'une image lorsqu'elle est dans un lien, il vous suffit de renseigner l'attribut border "0" : Image sans bordure bleue
<a href="adresse/de/destination.html"><img src="adresse/de/l/image.gif" border="0"></a>
Si vous voulez avoir une infobulle qui s'affiche sur votre lien lors du passage de la souris, vous pouvez renseigner l'attribut title :
Infobulle sur le lien
<a href="adresse/de/destination.html" title="Description de la page cible">Texte du lien</a>
Vous pouvez remplacer l'adresse du lien par l'appel d'une fonction Javascript qui s'excutera au clic du lien. Fonction Javascript appele dans un lien
<a href="javascript:maFonctionJavascript()">Texte du lien</a>
II-F - Les cadres II-F-1 - quoi servent-ils ?

Les cadres servent sparer la fentre en diffrents morceaux indpendants qui peuvent chacun contenir une page HTML diffrente, ces morceaux ayant la capacit de communiquer entre eux. On utilise au minimum deux cadres dans une fentre, en gnral un cadre pour le menu gauche et un autre pour le contenu du site. Parfois un rajoute un cadre en haut pour un bandeau fixe.
II-F-2 - Dbuter avec les cadres

Le document HTML qui va appeler les diffrents cadres ne pourra servir qu' a. Aucun texte ou aucune image insr dans ce document ne sera affich dans le navigateur du visiteur. Donc dans le cas o nous avons deux cadres, un pour le menu et un pour le contenu, nous aurons trois fichiers diffrents. Comme les deux pages du menu et du contenu sont des pages ordinaires, nous ferons l'impasse dessus. En revanche, la page qui appelle les cadres est tout fait diffrente. Ce sont les balises <frameset> et <frame> qui vont tre utilises pour la mise en oeuvre du jeu de cadres. Document HTML de base pour un jeu de cadres
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html> <head> <title>Titre de la page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </head> <frameset>  </frameset> </html>
On remarque la prsence de la balise <frameset> qui remplace d'ordinaire la balise <body> et le DOCTYPE appropri pour l'usage des cadres. La balise <frameset> va dsigner le nombre de cadres et leur taille. Si on renseigne l'attribut cols, la page sera coupe verticalement, alors que si on renseigne l'attribut rows, la page sera coupe horizontalement. Ces attributs prennent pour valeur les tailles des diffrents cadres spares par une virgule. Si une des valeurs est une toile, a signifie que le cadre en question prendra toute la place disponible restante dans la fentre. On ne peut videmment pas utiliser ces deux attributs conjointement sur une seule et mme balise <frameset>. Deux cadres verticaux Trois cadres verticaux
<frameset cols="20%, *">
<frameset cols="20%, *, 20%">
Deux cadres horizontaux
<frameset rows="100, *">
Dans cette balise <framset> nous allons mettre l'ensemble de nos cadres. Le nombre de cadres correspond au nombre de valeurs renseignes dans les attributs cols et rows. Exemple de cadres
<frameset cols="200, *"> <frame> <frame> </frameset>
C'est dans la balise <frame> que l'on va fixer la source de chacun des cadres, grce l'attribut src. Un attribut important de cette balise est name. En effet, il va falloir dire nos liens qui sont dans le menu, par exemple, d'aller changer la source d'un autre cadre. L'attribut target du lien prendra alors pour valeur le nom du cadre cibl. On peut aussi jouer sur les bordures avec l'attribut frameborder qui prend pour valeur "0" ou "1". De plus, par dfaut, les cadres peuvent tre redimensionns. Si on veut interdire cette fonctionnalit, on renseignera l'attribut noresize qui prend pour seule valeur "noresize". Enfin, on peut liminer les marges intrieures latrales avec les attributs marginwidth et marginheight renseigns "0". Exemple de cadres
<frameset cols="200, *"> <frame name="menu" src="menu.html"> <frame name="contenu" src="page1.html"> </frameset>
Exemple d'un lien sur la page menu.html
<a href="page2.html" target="contenu">Aller la page 2</a>
On peut aller encore plus loin, en imbricant diffrents cadres. Par exemple, on veut un bandeau en haut qui prend toute la largeur de l'cran. En-dessous, on veut deux cadres verticaux, un pour le menu et l'autre pour le contenu. Le code HTML ressemblera alors quelque chose comme : Exemple de cadres
<frameset rows="100, *"> <frame name="bandeau" src="bandeau.html"> <frameset cols="200, *"> <frame name="menu" src="menu.html"> <frame name="contenu" src="page1.html"> </frameset> </frameset>
II-F-3 - Les cadres locaux

Le cadre local ou "iframe" permet galement d'insrer une page externe dans notre site, la diffrence qu'il sera la suite du contenu de notre propre document et non pas spar par un troisime fichier qui fait la jointure. L'attribut de la balise <iframe> qui va servir afficher le contenu d'une autre page est src. On lui renseigne l'adresse complte si le site est diffrent du ntre, ou le chemin relatif ou absolu dans le cas o l'on veut afficher une de nos propres pages. On peut supprimer les bordures de l'iframe pour lui donner l'impression de mieux s'intgrer notre document en renseignant l'attribut frameborder "0" ("1" par dfaut). Aussi, les marges intrieures sont assez gnantes quand on a une page qui doit faire exactement les dimensions donnes cette balise. On peut alors les supprimer avec les attributs marginwidth et marginheight renseigns "0". Dans le cas o un navigateur ne peut pas afficher ce cadre local, il est intressant de laisser un texte alternatif. C'est le texte que l'on crit l'intrieur de la balise. Exemple de cadre local
<iframe frameborder="0" marginwidth="0" marginheight="0" src="http://adresse/d/une/page.html">
Exemple de cadre local
Dsol, votre navigateur ne supporte pas les cadres locaux </iframe>
II-F-4 - Les cadres aujourd'hui

De nos jours, il est fortement dconseill d'utiliser ce genre de procd. Voici une liste non-exhaustive des problmes encourus de part l'utilisation des frames : Impossibilit d'ajouter aux favoris la page dsire. Mauvaise gestion de l'impression par les navigateurs. Perte du sens vritable de la nature d'un document HTML cens tre identifi par une URL prcise et unique. Rfrencement des pages du site impossible dans les moteurs de recherche. Technologie obsolte qui est totalement abandonne dans les futures versions du (X)HTML.
II-G - Les listes

Elles servent, comme leur nom l'indique, crer une liste d'items, plus prcisment les numrer, comme dans le cas d'un sommaire par exemple.
II-G-1 - Les diffrents types de listes

On distingue cinq types de listes diffrents, chacun prvu pour un usage bien prcis : Les listes non ordonnes, ou puces. Les listes ordonnes. Les listes de dfinitions. Les listes de rpertoires. Les listes de menus.
II-G-1-a - Les listes non ordonnes

Elles sont dmarques par la balise <ul> et chacun des items est entour de la balise <li> : Exemple de liste non ordonne
<p>Ma liste de courses :</p> <ul> <li>Champignons</li> <li>Avocat</li> <li>Dentifrice</li> <li>Crales</li> </ul>
Rsultat :
II-G-1-a-i - Les diffrents types de puces

On va pouvoir jouer sur le design des puces l'aide de trois types diffrents. On renseigne le type des puces avec l'attribut type de la balise <ul>. Les types sont : disc (par dfaut au niveau 1 d'imbrication) circle (par dfaut au niveau 2 d'imbrication) square (par dfaut au niveau 3 et suivants d'imbrication)
Dans l'exemple prcdent, nous avons donc vu une liste non ordonne avec une puce de type disc. Voici quoi ressemblent les deux autres : Exemple de liste non ordonne
<p>Ma liste de courses :</p> <ul type="circle"> <li>Champignons</li> <li>Avocat</li> <li>Dentifrice</li> <li>Crales</li> </ul>
Rsultat :
Exemple de liste non ordonne
<p>Ma liste de courses :</p> <ul type="square"> <li>Champignons</li> <li>Avocat</li> <li>Dentifrice</li> <li>Crales</li> </ul>
Rsultat :
II-G-1-a-ii - Les puces en image

Des disques, des cercles ou des carrs, c'est bien beau, mais si on veut une puce en forme de flche et de couleur bleue ? Pour cela, rien de plus simple, il suffit d'utiliser une image pour remplacer la puce originale. Cependant cette mthode n'est possible qu' l'aide de CSS et de la proprit list-style-image :
Exemple de liste non ordonne
<p>Ma liste de courses :</p> <ul> <li>Champignons</li> <li>Avocat</li> <li>Dentifrice</li> <li>Crales</li> </ul>
CSS
li { } list-style-image : url(puce.gif);
Rsultat :
Pour plus d'informations sur les puces images, je vous renvoie l'article CSS plus complet : CSS dbutants : Puces en gifs avec les CSS
II-G-1-b - Les listes ordonnes

Elles sont introduites par la balise <ol> et chacun des items est encadr par la balise <li> : Exemple de liste ordonne
<p>Top 3 du tierc :</p> <ol> <li>Jolly</li> <li>Tonnerre</li> <li>Tornade</li> </ol>
Rsultat :
II-G-1-b-i - Les diffrents types de numrotation

Il existe cinq manires diffrentes de numroter les liste ordonnes. On renseigne le type de numrotation avec l'attribut type de la balise <ol>. Les types sont : 1 : Numrotation par les chiffres arabes (par dfaut). I : Numrotation par les chiffres romains. i : Numrotation par les chiffres romains minuscules. A : Numrotation par les lettres de l'alphabet. a : Numrotation par les lettres de l'alphabet minuscules.
Dans l'exemple prcdent, nous avons donc vu une liste ordonne avec une numrotation par les chiffres arabes. Voici quoi ressemblent les autres : Exemple de liste ordonne
<p>Top 3 du tierc :</p> <ol type="I"> <li>Jolly</li> <li>Tonnerre</li> <li>Tornade</li> </ol>
Rsultat :
Exemple de liste ordonne
<p>Top 3 du tierc :</p> <ol type="i"> <li>Jolly</li> <li>Tonnerre</li> <li>Tornade</li> </ol>
Rsultat :
<p>Top 3 du tierc :</p> <ol type="A"> <li>Jolly</li> <li>Tonnerre</li> <li>Tornade</li> </ol>
Rsultat :
<p>Top 3 du tierc :</p> <ol type="a"> <li>Jolly</li> <li>Tonnerre</li> <li>Tornade</li> </ol>
Rsultat :
II-G-1-b-ii - Modifier le dbut de la numrotation

Il est tout fait possible, pour une raison ou une autre, de modifier le numro de dpart par lequel va s'incrmenter la numrotation. Pour cela, il suffit de prciser une valeur l'attribut start de la balise <ol>. Cette valeur doit dans tous les cas tre numrique : Exemple de liste ordonne
<p>Top 3 invers du tierc :</p> <ol type="I" start="8"> <li>Tortue</li> <li>Escargot</li> <li>Limace</li> </ol>
II-G-1-c - Les listes de dfinitions

Elles sont dlimites par la balise <dl> qui comprend une liste de termes dfinir reprsents par la balise <dt> qui peuvent avoir une ou plusieurs dfinitions elles-mmes encadres par la balise <dd> (une pour chaque dfinition). Exemple de liste de dfinitions
<dl> <dt>Oreiller</dt> <dd>Pice de literie bourre de plumes, de duvet, de crin... destine soutenir la tte pendant le repos.</dd> <dt>Puce</dt> <dd>Insecte de trs petite taille se dplaant par sauts.</dd> <dd>March o l'on vend des objets d'occasion.</dd> </dl>
Rsultat :
II-G-1-d - Les listes de rpertoires

Elles sont encadres par la balise <dir> et chacun des items est compris dans la balise <li>. Exemple de liste de rpertoires
<dir> <li>css</li> <li>fichiers</li> <li>images</li> <li>js</li> </dir>
Rsultat :
II-G-1-e - Les listes de menus

Elles sont reprsentes par la balise <menu> et chacun des items est dlimit par la balise <li>. Exemple de liste de menus
<menu> <li>Accueil</li> <li>Page 1</li> <li>Page 2</li> </menu>
Rsultat :
II-G-2 - Les listes imbriques

L'imbrication des listes permet une prsentation claire et dtaille d'un menu ou d'un sommaire par exemple. On peut imbriquer les listes non ordonnes et ordonnes sans distinction et mme les mlanger : Exemple de listes imbriques
<ol type="I"> <li>La gense</li> <li>La vie <ol type="A"> <li>L'enfance</li> <li>L'adolescence</li> <li>Le passage l'ge adulte <ul> <li>Le jeune adulte</li> <li>La crise de la quarantaine</li> </ul> </li> <li>La vieillesse</li> </ol> </li> <li>La mort</li> </ol>
Rsultat :
II-G-3 - L'utilit des listes aujourd'hui

La principale utilisation des listes de nos jours se fait par les listes non ordonnes pour la cration de divers menus. L'imbrication de ces listes non ordonnes couple avec un soupon de CSS permet de faire des menus multiples niveaux d'affichage, comme les menus droulants. D'autre part, on peut retrouver les listes ordonnes principalement pour la rdaction de sommaires, notamment destins aux FAQ. Voici quelques exemples de menus qui utilisent ces listes non ordonnes : Cours CSS : Menu et barre de navigation Commentez l'article :
II-H - Les tableaux II-H-1 - quoi servent-ils ?

Un tableau qu'est-ce que c'est ? Tout simplement une suite de lignes et de colonnes qui forment un ensemble de cellules. Les tableaux servent avant tout prsenter des donnes tabulaires dont voici un exemple : Elves Laure Philippe Jean Maurice Franais Mathmatiques 14 10 8.5 12 15 14.5 7.5 18 Histoire Sport
11 9 10.5 12
11 15 12 14
Malgr cela, l'emploi le plus frquent des tableaux reste la mise en page de documents. En effet, l'implmentation des tableaux tant assez intuitive, les dbutants prfreront en user ainsi. S'ajoute cela les diteurs WYSIWYG des logiciels de cration de sites qui gnrent ce genre de code automatiquement. Cependant, la mise en page par tableau devient dprcie : Voir le paragraphe L'utilit des tableaux aujourd'hui.
II-H-2 - Du tableau simple au tableau complexe II-H-2-a - Les bases d'un tableau
Un tableau est dlimit par la balise <table>. Le contenu d'un tableau HTML est gnr horizontalement. C'est--dire qu'il n'est pas cr colonne par colonne mais ligne par ligne. Pour crer un tableau, nous commenons par crer des lignes grces aux balises <tr>. Puis nous insrons dans ces lignes les cellules du tableau grce aux balises <td>. Le contenu (textes, images, autres balises) se trouve uniquement dans les balises <td> et ne doit se trouver en aucun cas en dehors. Donc pour avoir un tableau d'une cellule, soit une ligne et une colonne, on obtient ce code :
Tableau d'une cellule
<table border="1"> <tr> <td>Contenu de la cellule</td> </tr> </table>
On obtient : Contenu de la cellule Et pour un tableau de deux lignes et deux colonnes : Tableau de deux lignes et deux colonnes
<table border="1"> <tr> <td>Cellule <td>Cellule </tr> <tr> <td>Cellule <td>Cellule </tr> </table> 1</td> 2</td> 3</td> 4</td>
On obtient : Cellule Cellule 1 2 Cellule Cellule 3 4 Par dfaut, la bordure n'est pas visible, dans les codes prcdents on a rajout l'attribut border la balise <table> pour la faire apparatre. On peut videmment paissir la bordure en augmentant la valeur. On peut voir sur les tableaux affichs prcdemment que le texte n'est pas directement coll la bordure. Il s'agit l d'un espace interne par dfaut des navigateurs. Pour le supprimer, on doit renseigner l'attribut cellpadding et lui mettre la valeur "0". De la mme manire, la bordure ne fait pas effectivement 1 pixel de large alors qu'on lui a renseign la valeur 1. Il persiste un espace par dfaut entre chaque cellule que l'on peut faire disparatre en affectant la valeur "0" l'attribut cellspacing. Un autre attribut ncessaire est l'attribut summary. Il contient du texte et fournit un rsum du tableau, utile pour les personnes malvoyantes. Si on reprend tout ce dont on vient de parler, on aurait un code comme : Rcapitulatif des attributs de la balise table
<table border="1" cellpadding="0" cellspacing="0" summary="Rsum du tableau pour les personnes malvoyantes"> <tr> <td>Cellule 1</td> <td>Cellule 2</td> </tr> </table>
Attention bien avoir le mme nombre de <td> pour chaque ligne, sinon le navigateur risque de mal interprter le tableau.
II-H-2-b - Le titre d'un tableau

Pour dcrire le contenu d'un tableau, par exemple expliquer dans notre tout premier exemple de tableau qu'il s'agit des notes de la classe de 3meB, il faut utiliser la balise <caption>, placer directement aprs l'ouverture du tableau. Cette balise prend l'attribut align qui accepte comme valeurs "top" (par dfaut), "bottom", "left" et "right", en fonction de l'endroit o l'on veut afficher cette lgende. Exemple d'un titre de tableau
<table border="1"> <caption align="bottom">Notes de la classe de 3meB</caption> <tr> <td>Elves</td> <td>Franais</td> <td>Mathmatiques</td> <td>Histoire</td> <td>Sport</td> </tr> <tr> <td>Laure</td> <td>14</td> <td>10</td> <td>11</td> <td>11</td> </tr> <tr> [...] </tr> </table>
II-H-2-c - La ligne d'en-tte d'un tableau

Pour rependre l'exemple des notes de la classe de 3meB, on remarque que la premire ligne peut faire office d'entte. En effet, elle renseigne le contenu de chacune des colonnes et n'a donc pas le mme genre de contenu que tout le reste du tableau. Pour prciser au navigateur qu'il s'agit donc de cellules spciales, on va les modifier en remplaant pour cette ligne seulement les balises <td> par des balises <th> : Utilisation de la balise th
<table border="1"> <caption align="bottom">Notes de la classe de 3meB</caption> <tr> <th>Elves</th> <th>Franais</th> <th>Mathmatiques</th> <th>Histoire</th> <th>Sport</th> </tr> <tr> <td>Laure</td> <td>14</td> <td>10</td> <td>11</td> <td>11</td> </tr> <tr> [...] </tr> </table>
II-H-2-d - Les diffrentes parties d'un tableau

Quand on arrive avoir un tableau de grande taille, il devient moins vident grer. Pour cela, on peut regrouper les lignes par grandes parties : l'en-tte, le corps et le pied, respectivement reprsentes par les balises <thead>, <tbody> et <tfoot>. Ces balises vont englober les lignes en fonction de l'endroit o les lignes doivent tre places. Elles sont videmment facultatives mais aident la maintenance du code. Elles doivent apparatre dans l'ordre suivant : <thead>, <tfoot> et <tbody>. Notre sempiternel exemple de la classe de 3meB contient clairement un en-tte, mais pas de pied. Qu' cela ne tienne, on va en rajouter un, parce que la natalit ayant tant augment que les classes sont nombreuses et qu'arriv en fin de tableau on ne sait plus quoi correspondent les colonnes. Ce qui donne : Exemple de groupage des lignes d'un tableau
<table border="1"> <caption align="bottom">Notes de la classe de 3meB</caption> <thead> <tr> <th>Elves</th> <th>Franais</th> <th>Mathmatiques</th> <th>Histoire</th> <th>Sport</th> </tr> </thead> <tfoot> <tr> <th>Elves</th> <th>Franais</th> <th>Mathmatiques</th> <th>Histoire</th> <th>Sport</th> </tr> </tfoot> <tbody> <tr> <td>Laure</td> <td>14</td> <td>10</td> <td>11</td> <td>11</td> </tr> <tr> [...] </tr> </tbody> </table>
II-H-2-e - La fusion de lignes et de colonnes d'un tableau

On distingue deux types de fusion : la fusion horizontale o sont en jeu deux (ou plus) colonnes, la fusion verticale o sont en jeu deux (ou plus) lignes. Dans les deux cas, elle s'opre sur les cellules, donc sur la balise <td>. Elle se traduit par l'utilisation de l'attribut colspan dans le cas d'une fusion horizontale et par l'attribut rowspan dans le cas d'une fusion verticale. Ces attributs prennent pour valeurs le nombre de cellules fusionner. Exemple d'utilisation de colspan
<table border="1">
Exemple d'utilisation de colspan

<td colspan="5">Cellule qui se rpend sur 5 colonnes</td> </tr> <tr> <td>Colonne 1</td> <td>Colonne 2</td> <td>Colonne 3</td> <td>Colonne 4</td> <td>Colonne 5</td> </tr> </table> <tr>
On obtient : Cellule qui se rpend sur 5 colonnes Colonne 1 Colonne 2 Colonne 3 Colonne 4 Colonne 5 La somme des colspan de chaque ligne doit tre identique toutes les autres lignes. En ce qui concerne l'attribut rowspan, on aurait un code tel que : Exemple d'utilisation de rowspan
<table border="1"> <tr> <td rowspan="2">Cellule sur deux lignes</td> <td>Ligne 1 - Colonne 2</td> <td>Ligne 1 - Colonne 3</td> <td>Ligne 1 - Colonne 4</td> </tr> <tr> <td>Ligne 2 - Colonne 2</td> <td>Ligne 2 - Colonne 3</td> <td>Ligne 2 - Colonne 4</td> </tr> </table>
Il est tout de suite beaucoup plus difficile de se rendre compte de son erreur, le rowspan est dj moins intuitif que le colspan. On pourrait aller plus loin en combinant les deux techniques sur un seul et mme tableau : Exemple d'utilisation de colspan et rowspan
<table border="1"> <tr> <td colspan="3">Cellule 1</td> <td>Cellule 2</td> </tr> <tr> <td rowspan="3">Cellule 3</td> <td>Cellule 4</td> <td>Cellule 5</td> <td>Cellule 6</td> </tr> <tr> <td>Cellule 7</td> <td colspan="2" rowspan="2">Cellule 8</td> </tr> <tr> <td>Cellule 9</td> </tr> </table>
On remarque que le code est devenu extrmement compliqu et que la moindre erreur de fusion de notre part entranerait une interprtation du tableau compltement bancale par les navigateurs.
II-H-3 - L'utilit des tableaux aujourd'hui

Grce aux techniques de fusion vues prcdemment, la tendance il y a quelques annes, tait de profiter de ce systme pour mettre en page assez rapidement l'ensemble de son site web. Cependant, si cette mthode peut sduire, elle est fortement dconseille. En effet, les tableaux sont censs (et doivent) tre utiliss uniquement pour l'affichage de donnes tabulaires. Dans le cas d'une mise en page, prfrez la solution du couple "DIV + CSS". Voir l'article : Une mise en page rapide et facile avec des div et du CSS. On peut facilement voir dans notre dernier exemple o l'on combine les deux techniques de fusion, que notre code sera difficilement maintenable dans le cas d'une retouche ou de l'ajout d'une nouvelle cellule. Voici quelques raisons pour lesquelles il ne faut pas utiliser les tableaux pour la mise en page : Ils alourdissent les pages HTML : beaucoup de balises pour finalement y mettre peu de contenu. Ils sont trs difficiles maintenir dans le cas d'une retouche. Ils nuisent l'accessibilit : problme d'interprtation des navigateurs spcialiss destins aux malvoyants par exemple. Ils sont mal grs par les navigateurs l'impression dans le cas de tableaux complexes.
J'espre avoir russi vous convaincre de ne pas/plus utiliser les tableaux mauvais escient. Commentez l'article :
II-I - Les formulaires II-I-1 - quoi servent-ils ?

Les formulaires servent envoyer des donnes au serveur, donnes remplies en gnral par un visiteur, que ce soit pour l'inscription sur un site ou un formulaire de contact par exemple. Les formulaires sont dots de divers contrles comme des champs de saisie, des boutons, des listes, etc, qui permettent au visiteur d'interagir avec la page qu'il est en train de consulter.
II-I-2 - La balise form

Tous les champs de formulaires quels qu'ils soient doivent se trouver dans cette balise <form>. C'est cette balise qui va permettre de renseigner la page de destination du formulaire, l'aide de l'attribut action, qui peut prendre pour valeurs une URL en absolu ou en relatif, voire mme une adresse e-mail. Elle est aussi utilise pour prciser le mode d'envoi des donnes. C'est avec l'attribut method que l'on va le prciser. Cet attribut prend deux valeurs diffrentes qui sont "get" et "post". Les valeurs envoyes en "GET" passent par l'URL alors qu'en "POST" elles sont envoyes de manire transparente, aussi, on prfrera l'utilisation de la mthode d'envoi "POST". L'attribut enctype, quant lui, sert indiquer le type de donnes envoyes au serveur dans le cas d'utilisation de la mthode "POST". La valeur gnralement utilise pour cet attribut est "multipart/form-data" qui sert lors de l'envoi de fichiers chargs avec un champ de type "file". Voyons maintenant quoi pourrait ressembler notre balise <form> : Exemple de balise form
<form action="envoi-formulaire.php" method="post">  </form>
Si vous pouvez bien entendu mettre plusieurs formulaires dans un mme document, ceuxci doivent en aucun cas tre imbriqus. De plus, il est dconseill d'utiliser des espaces dans l'attribut name de tous les champs utiliss dans un formulaire, puisque celui-ci sera retranscrit en caractre de soulignement
"_" lors de la soumission du formulaire et peut donc induire en erreur lors de la rcupration des donnes dans vos scripts.
II-I-3 - Les champs texte monolignes

On distingue deux types de champs texte monolignes : les champs de type "texte" et les champs de type "mot de passe". Le champ de type "texte" est l'lment de base d'un formulaire, il permet d'entrer du texte court sur une ligne, comme un login, un e-mail, ou autres alors que le champ de type "mot de passe" permet de renseigner un mot de passe, dont l'affichage sera camoufl aux yeux des autres personnes. Le champ de texte monoligne est caractris par la balise <input> et l'attribut type dont la valeur sera "text" ou "password". On renseignera aussi l'attribut name qui sera le nom du champ, celui qui va nous permettre de retrouver la valeur lors de l'envoi du formulaire. D'autres attributs sont disponibles, comme value qui permet d'attribuer une valeur par dfaut au champ, size qui permet de prciser la taille du champ en nombre de caractres, maxlength qui sert limiter le nombre de caractres possibles, readonly qui prend pour seule valeur "readonly" et verrouille le champ, disabled qui prend pour seule valeur "disabled" et permet de dsactiver le champ. Lorsqu'un champ est dfini en "disabled", sa valeur n'est pas envoye au serveur. Voici quelques exemples de champs texte : Exemples de champs texte
<input type="text" size="5" name="code_postal" maxlength="5"> <input type="text" name="nom_champ" readonly="readonly" value="Champ vrouill"> <input type="text" name="login" value="Entrez ici votre login" size="20"> <input type="password" name="mdp">
II-I-4 - Les champs texte multilignes

Si vous souhaitez que vos visiteurs puissent saisir de longs textes, comme des champs de commentaires pour des articles d'un blog par exemple, il faudra se tourner vers l'utilisation de la balise <textarea>. Contrairement au champ de texte monoligne, le textarea est une balise double et son contenu est crit entre les balises ouvrante et fermante et non dans un attribut value. Deux attributs sont ncessaires au <textarea> : rows qui contient le nombre de lignes et cols qui contient le nombre de colonnes. On peut, tout comme le champ de texte monoligne, rajouter les attributs name, readonly et disabled. L'attribut maxlength n'existe pas pour cette balise, et pour en limiter le nombre de caractres il est possible de passer par du JavaScript. Voici quelques exemples de <textarea> : Exemples de champs texte multilignes
<textarea name="commentaire" rows="5" cols="80"></textarea> <textarea name="sujet" rows="6" cols="100">Texte par dfaut</textarea>
II-I-5 - Les champs cachs

Il nous arrivera souvent de vouloir envoyer des donnes au serveur de manire transparente pour le visiteur. On utilisera alors un champ cach, qui ne sera pas affich dans le navigateur du visiteur mais dont les donnes seront envoyes. Attention, cette balise apparat tout de mme dans le code source de la page.
Pour cela, on utilise la balise <input> avec "hidden" comme valeur de l'attribut type. Il est aussi ncessaire de renseigner l'attribut name pour retrouver ces donnes caches du ct du serveur ainsi que l'attribut value qui va contenir ces donnes. Exemple de champ cach : Exemple de champ cach
<input type="hidden" name="clef" value="a182f7d8e844d956a65b18e84f">
II-I-6 - Les champs de fichiers

Pour permettre aux visiteurs d'envoyer des fichiers par l'intermdiaire du formulaire, que ce soit en pice jointe d'un e-mail ou le chargement d'une image sur le serveur, on va utiliser la balise <input> dont l'attribut type est renseign "file". Ceci fait, un champ avec un bouton "Parcourir" sera disponible. Mais pour que le champ soit oprationnel, il faut imprativement renseigner l'attribut enctype de la balise <form> "multipart/form-data". Il est aussi plus qu'utile de prciser l'attribut name du champ "file". On peut aussi renseigner l'attribut size qui affecte la taille du champ dans lequel sera crit le nom du fichier. Exemple de champ "file" : Exemple de champ file
<input type="file" name="image">
Il est galement possible de limiter le poids du fichier en rajoutant un champ cach dans le formulaire contenant le champ "file". Ce champ cach doit avoir pour name la valeur "MAX_FILE_SIZE" et pour value le poids maximum en octet. Limitation du poids du champ file
<input type="hidden" name="MAX_FILE_SIZE" value="20000">
Cette limitation ne vous affranchit pas de faire la vrification ct serveur ! En effet, le code HTML peut facilement tre modifi par les visiteurs, donc cette valeur aussi.
II-I-7 - Les boutons radio

Les boutons radio sont utiliss lorsque vous voulez laisser aux visiteurs un choix et un seul parmi une liste de propositions. La balise est alors <input> dont l'attribut type est renseign "radio". Ces boutons radio vont par groupe, c'est--dire qu'ils doivent avoir le mme nom pour un groupe de propositions. Le nom est renseign avec l'attribut name. La valeur de l'attribut value va tre transmise au serveur en fonction du bouton choisi. Vous pouvez aussi forcer un bouton radio d'un groupe tre coch au chargement de la page en lui mettant l'attribut checked dont la seule valeur est "checked". Voyons maintenant des exemples de groupes de boutons radio : Exemples de groupes de boutons radio
<p> <input type="radio" name="civilit" value="mlle"> Mademoiselle <input type="radio" name="civilit" value="mme"> Madame <input type="radio" name="civilit" value="mr"> Monsieur
</p> <p>
</p>
<input <input <input <input
type="radio" type="radio" type="radio" type="radio"
name="genre" name="genre" name="genre" name="genre"
value="homme" checked="checked"> Homme value="femme"> Femme value="et"> Alien value="indfini"> Indfini
Si vous donnez un nom diffrent aux boutons d'un groupe, le navigateur ne saura pas qu'ils appartiennent au mme groupe (y a pas de miracle), donc plusieurs choix seront possibles et on perd toute l'utilit des boutons radio.
II-I-8 - Les cases cocher

Les cases cocher sont sensiblement identiques aux boutons radio, mais permettent un choix multiple pour un groupe de propositions. Les attributs sont identiques, la diffrence que l'attribut type prend pour valeur "checkbox". Un problme cependant, lorsque vous dsignez un groupe de cases cocher par le mme nom, seule la dernire sera envoye au serveur. Pour contrer cela, il suffit de rajouter des crochets ouvrant et fermant au nom du groupe. Il indiquera au serveur qu'il s'agit d'un tableau de valeurs rcuprer et non une seule valeur (comme dans le cas des boutons radio). En revanche, dans le cas d'utilisation d'une case cocher unique (sans groupe), comme par exemple des CGU valider, les crochets sont inutiles. Voici un exemple de groupe de cases cocher : Exemple de cases cocher
<input <input <input <input <input type="checkbox" type="checkbox" type="checkbox" type="checkbox" type="checkbox"
name="qualite[]" name="qualite[]" name="qualite[]" name="qualite[]" name="qualite[]"
value="intelligent"> Intelligent value="beau"> Beau value="serviable"> Serviable value="fort"> Fort value="gnreux"> Gnreux
II-I-9 - Les boutons

Il existe deux balises diffrentes pour prsenter les boutons : la balise <input> et la balise <button>. La diffrence entre les deux est que la balise <button> est double, donc qu'elle a une balise ouvrante et une balise fermante alors que la balise <input> est simple. Il est de plus possible des balises de mise en forme dans la balise <button>. Il y a 4 types diffrents de boutons : Le bouton simple Le bouton d'envoi Le bouton image Le bouton effacer
II-I-9-a - Le bouton simple

Il est dfini par l'attribut type des balises <input> et <button> ayant pour valeur "button". Ce bouton n'est utile que lors d'appel de scripts JavaScript au moment du clic. Il n'a aucune autre fonction particulire. Exemples de boutons simples : Exemples de boutons simples
<input type="button" name="addition" value="Additionner" onclick="addition();"> <button type="button" name="multiplication" onclick="multiplication();"><b>Multiplier</b></button>
II-I-9-b - Le bouton d'envoi

Le bouton d'envoi sert, comme son nom l'indique, envoyer les donnes du formulaire au serveur. C'est celui qui va permettre de valider le formulaire. Il est caractris par la valeur "submit" de l'attribut type des balises <input> et <button>. Exemples de boutons d'envoi : Exemples de boutons d'envoi
<input type="submit" name="envoyer" value="Valider">
Exemples de boutons d'envoi
<button type="submit" name="soumettre">Soumettre<br>les rponses</button>
II-I-9-c - Le bouton image

Le bouton image se comporte exactement comme un bouton d'envoi, c'est--dire qu'il sert la validation du formulaire. Il sert personnaliser son bouton, dans le cas o l'on ne trouve pas les boutons de base notre got. Il est dfini par l'attribut type de la balise <input> ayant pour valeur "image" et l'on renseigne l'adresse de l'image avec l'attribut src. C'est le seul bouton qui ne peut pas tre gr par la balise <button>. Exemple de bouton image : Exemple de bouton image
<input type="image" name="envoyer" src="adresse/de/l/image">
II-I-9-d - Le bouton effacer

Ce bouton sert rinitialiser toutes les valeurs du formulaire. Il est caractris par la valeur "reset" de l'attribut type des balises <input> et <button>. Exemples de boutons effacer : Exemples de boutons effacer
<input type="reset" name="effacer" value="Effacer toutes les valeurs"> <button type="reset" name="effacer">Rinitialiser</button>
II-I-10 - Les listes

Les listes permettent de laisser un choix aux visiteurs, au mme titre que les boutons radio ou les cases cocher, mais sont plus pratiques lorsqu'il s'agit de proposer un grand nombre de choix. On distingue deux types de listes, les listes normales et les listes droulantes. Les deux sont introduites par la balise <select> qui comprend les diffrents choix sous forme de balise <option> dont on renseigne la valeur qui sera envoye au serveur grce son attribut value. On peut mme suggrer une proposition par dfaut en prcisant l'attribut selected de la balise <option> de notre choix. Par dfaut, une liste est droulante. On peut (doit) renseigner le nom de la liste avec l'attribut name. Continuons avec un exemple : Exemple de liste
<select name="couleur_yeux"> <option value="bleus">Bleus</option> <option value="bruns" selected="selected">Bruns</option> <option value="verts">Verts</option> <option value="noisettes">Noisettes</option> <option value="gris">Gris</option> <option value="vairons">Vairons</option> </select>
Cette liste est donc une liste droulante avec un seul choix possible parmi les six proposs. On peut rendre cette liste non droulante en rajoutant l'attribut size qui prend pour valeur le nom de choix afficher, par exemple "3". Ce qui donne : Exemple de liste
<select name="couleur_yeux" size="3"> <option value="bleus">Bleus</option> <option value="bruns">Bruns</option> <option value="verts" selected="selected">Verts</option>
Exemple de liste
<option value="noisettes">Noisettes</option> <option value="gris">Gris</option> <option value="vairons">Vairons</option> </select>
Ici encore, un seul choix est possible. Pour pouvoir proposer plusieurs choix, comme dans le cas de cases cocher, il suffit de rajouter l'attribut multiple qui prend pour seule valeur "multiple". Voyons pour l'exemple : Exemple de liste choix multiple
<select name="matieres_preferees" size="5" multiple="multiple"> <option value="maths">Maths</option> <option value="franais">Franais</option> <option value="anglais">Anglais</option> <option value="histoire">Histoire</option> <option value="sport">Sport</option> <option value="dessin">Dessin</option> <option value="musique">Musique</option> <option value="physique">Physique</option> <option value="sciences naturelles">Sciences naturelles</option> </select>
Le choix multiple ne peut pas se faire sur une liste droulante. L'attribut size doit tre renseign pour que le multiple fonctionne.
II-I-11 - Amliorez l'accessibilit de vos formulaires

Pour amliorer l'accessibilit de vos formulaires aux handicaps, malvoyants, quelques balises ont t cres et il est toujours bon de les utiliser, d'autant plus qu'elles ne perturbent pas l'utilisation pour les autres visiteurs et clarifient mme la comprhension des formulaires. Il s'agit d'une part de la balise <fieldset> qui permet de grouper logiquement des champs de formulaires de mme nature. Par exemple, pour un formulaire d'inscription vous pouvez grouper tous les champs en rapport avec les informations personnelles du visiteur, puis grouper tous les champs concernant ses loisirs, etc. La balise qui va permettre de donner ce nom au groupage de champs est <legend>. Regardons quelques exemples : Exemples de fieldset
<fieldset> <legend>Informations personnelles</legend> <!-- Ici divers champs sur les informations personnelles, comme la saisie du nom, prnom et adresse -> </fieldset> <fieldset> <legend>Loisirs</legend> <!-- Ici divers champs sur les loisirs du visiteur, comme la musique et les films qu'il aime etc -> </fieldset>
Il y a d'autre part, la balise <label> qui permet de donner un libell un champ de formulaire en les associant l'aide de l'attribut for de cette balise qui doit tre identique l'attribut id du champ auquel elle est rattache. Le texte mis dans le label est alors cliquable. Par exemple : Exemples de fieldset
<label for="nom">Votre nom</label> <input type="text" name="nom" id="nom"> Aimez-vous la viande ?
Exemples de fieldset
<label for="oui">Oui</label> <input type="radio" name="viande" id="oui"> <label for="non">Non</label> <input type="radio" name="viande" id="non">
III - L'entte du document - head

La balise <head> contient de nombreux renseignements sur la page, sur l'auteur, ainsi que la plupart des scripts ( JavaScript, VBscript,...) et styles CSS.
III-A - Le titre
Le titre de votre page, qui se trouve entre les balises <title> et </title>, est sans doute l'une des balises les plus importantes du document. En effet, c'est son contenu qui sera affich en titre des rsultats de la recherche dans les moteurs de recherche, donc il faut essayer au maximum d'y mettre les mots-clefs importants. Il est trs conseill, voire fortement recommand de mettre un titre unique pour chaque page de votre site, toujours en rapport avec le contenu de la page en question. Ce titre est galement ce qui apparat dans la barre de titre du navigateur ainsi que dans les signets lorsque vous mettez le site en favoris. Exemple de titre
<title>Tutoriel HTML - Apprenez les bases du HTML</title>
III-B - Les scripts

Les scripts sont de petits programmes en JavaScript ou en VBScript excuts ct client qui augmentent l'ergonomie de vos pages lorsqu'ils sont utiliss bon escient. On distingue deux moyens d'inclure des scripts : Les scripts externes. Les scripts internes.
III-B-1 - Les scripts externes

Les scripts externes sont des fichiers externes la page, avec l'extension .js par exemple pour les scripts JavaScript. On les inclut grce l'attribut src de la balise <script> : Balise script
<script type="text/javascript" src="chemin/du/fichier/javascript.js"></script>
Dans le cas d'inclusion d'un script externe, tout le code insr entre les balises <script> sera ignor !
III-B-2 - Les scripts internes

Les scripts internes sont des morceaux de code directement crits entre les balises <script> et </script>. Ils sont donc insrs directement dans la page comme suit :
Balise script
<script type="text/javascript"> function maFonction() { /* du code ici */ } </script>
Lors de la cration d'une fonction, celle-ci est unique la page, donc pour pouvoir la rutiliser il faut la rcrire dans une autre page : duplication inutile de code. Commentez l'article :
III-C - Les styles

Les feuilles de style en cascade ou HTML. Aller plus loin avec le CSS CSS (Cascading Style Sheets) s'utilisent pour mettre en page notre code
III-C-1 - Les styles externes

Il y a deux manires d'importer un fichier CSS externe, soit avec une balise HTML, soit avec du code CSS. Import avec une balise HTML Import avec du code CSS
<link rel="stylesheet" type="text/css" href="chemin/du/fichier.css">
<style type="text/css"> @import url("chemin/du/fichier.css"); </style>
Quelle mthode doit alors tre prfre ? Au niveau "performance", aucune. Mais on va prfrer la seconde mthode pour la simple et bonne raison que cette syntaxe n'est pas reconnue par les anciens navigateurs (comme Netscape 4.x) et donc ceux-ci interprtant trs mal les proprits CSS ne risqueront pas de rendre le site illisible pour le visiteur.
III-C-2 - Les styles internes

Les styles internes la page sont crire entre les balises <style> et </style> : CSS interne
<style type="text/css"> body { background-color : #fff; } </style>
Les styles internes sont uniques la page, donc pour pouvoir les rutiliser il faut les rcrire dans une autre page : duplication inutile de code. Commentez l'article :
III-D - Les meta III-D-1 - quoi servent-elles ?

Les balises meta, obligatoirement places dans la balise <head>, permettent de renseigner diverses informations sur la page en cours, comme son auteur, une courte description du document, des mots-clefs, la date de cration, son jeu de caractre (ou encodage), etc. On peut diffrencier deux grandes familles de balises meta : Les meta name : Touchent toutes les informations concernant le document, l'auteur, le site, les outils utiliss, etc. Les meta http-equiv : Concernent les meta qui communiquent avec le navigateur.
S'il existe de nombreuses balises meta diffrentes, la plupart sont inutiles, et de ce fait totalement facultatives. Pour garder la validit W3C de votre page, seule la balise concernant son encodage est ncessaire. Il y a quelques annes, certaines balises taient indispensables pour le rfrencement de son site Web, comme la description et les mots-clefs, cependant, les techniques de rfrencement tant en perptuelle volution, aujourd'hui leur intrt est minime.
III-D-2 - La balise meta content-type

Cette meta est la plus importante et la seule obligatoire pour passer la validation W3C. meta content-type \x{0097} Prcise le type MIME de la page ainsi que le jeu de caractres utilis (encodage). Exemple
<meta http-equiv="content-type" content="text/html; charset=utf-8">
III-D-3 - Ajoutez des infos sur vous

meta author \x{0097} Renseigne le prnom et nom de l'auteur de la page courante. S'il y a plusieurs auteurs, les sparer d'une virgule. Exemple
<meta name="author" content="Josselin WILLETTE">
meta publisher \x{0097} Renseigne le prnom et nom de l'diteur du site. S'il y a plusieurs diteurs, les sparer d'une virgule. Dans le cas d'une socit, il faut renseigner son nom. Exemple
<meta name="publisher" content="Josselin WILLETTE">
meta reply-to \x{0097} Dfinit l'adresse e-mail de l'auteur de la page. Attention, cette balise est scanne par les robots spammeurs ! Exemple
<meta name="reply-to" content="jwillette at monsite dot com">
meta contact \x{0097} Dfinit l'adresse e-mail de la personne ou service contacter. Attention, cette balise est scanne par les robots spammeurs !
Exemple
<meta name="contact" content="contact at masociete dot com">
meta contactname \x{0097} Spcifie le nom de la personne contacter. Exemple

<meta name="contactname" content="Josselin WILLETTE">
meta contactorganization \x{0097} Indique le nom de la socit dtentrice du site. Exemple

<meta name="contactorganization" content="MaSocit SARL">
meta contactstreetaddress1 \x{0097} Indique la premire ligne de l'adresse de l'auteur ou de la socit dtentrice du site. Exemple
<meta name="contactstreetaddress1" content="15 rue de la poupe qui tousse">
meta contactstreetaddress2 \x{0097} Indique la deuxime ligne de l'adresse de l'auteur ou de la socit dtentrice du site. Exemple
<meta name="contactstreetaddress2" content="Btiment A, Etage 3">
meta contactzip \x{0097} Indique le code postal de l'auteur ou de la socit dtentrice du site. Exemple
<meta name="contactzip" content="75000">
meta contactcity \x{0097} Indique la ville de l'auteur ou de la socit dtentrice du site. Exemple
<meta name="contactcity" content="MAVILLE">
meta contactstate \x{0097} Indique le pays de l'auteur ou de la socit dtentrice du site. Exemple
<meta name="contactstate" content="FRANCE">
III-D-4 - Ajoutez des infos sur votre site

meta description \x{0097} Courte description du site qui sera affiche dans les rsultats de la plupart des moteurs de recherche. Ne pas dpasser les 200 caractres sous peine de voir la description tronque. Exemple
<meta name="description" content="Tutoriel HTML sur les lments fondamentaux savoir pour bien dbuter la progra
meta keywords \x{0097} Contient une liste de mots-clefs sur lesquels les moteurs de recherche vont se rfrer. Les mots-clefs sont spars par une virgule. Avoir trop de mots-clefs peut tre considr par les moteurs comme du spam, donc ne pas dpasser les 500 caractres. Exemple
<meta name="keywords" content="tutoriel html, cours html, balise meta, formulaires, listes, tableaux, cadres">
meta identifier-url \x{0097} Renseigne l'URL d'entre du site. Exemple

<meta name="identifier-url" content="http://j-willette.developpez.com/">
meta subject \x{0097} Expose le sujet de votre site en quelques mots. Exemple
<meta name="subject" content="Site d'apprentissage du HTML">
meta distribution \x{0097} Dfinit le type de rseau de publication du site. Valeurs Description Visible sut l'Internet. Visible uniquement sur un poste local. Visible sur un intranet.
global local iu Exemple
<meta name="distribution" content="global">
meta rating \x{0097} Dfinit le type de public vis par le site. Valeurs Description Tout public. Rserv aux adultes. Accs restreint. Accs interdit en-dessous de 14 ans.
general mature restricted 14years Exemple
<meta name="rating" content="general">
meta language \x{0097} Renseigne la langue utilise sur le site. Exemple

<meta name="language" content="fr">
III-D-5 - Ajoutez des infos sur la cration

meta copyright \x{0097} Indique le ou les copyrights auxquels la page est soumise. Exemple
<meta name="copyright" content=" 2007 Josselin WILLETTE">
meta generator \x{0097} Dclare quels sont les logiciels utiliss pour faire le site. Les diffrents logiciels sont spars d'une virgule. Exemple
<meta name="generator" content="Notepad++, Gimp">
meta date-creation-ddmmyyyy \x{0097} Indique la date de cration de la page sous la forme JJMMAAAA. Exemple
<meta name="date-creation-ddmmyyyy" content="01122007">
meta date-revision-ddmmyyyy \x{0097} Indique la date de dernire modification de la page sous la forme JJMMAAAA. Exemple
<meta name="date-revision-ddmmyyyy" content="01122007">
meta content-script-type \x{0097} Prcise le langage de scripts utilis dans la page par son type MIME. Exemple
<meta http-equiv="content-script-type" content="text/javascript">
meta content-style-type \x{0097} Indique l'utilisation d'une feuille de style dans la page et renseigne son type MIME. Exemple
<meta http-equiv="content-style-type" content="text/css">
III-D-6 - Orientez les robots

meta robots \x{0097} Indique aux robots indexeurs si la page doit tre indexe ou non. Plusieurs valeurs sont possibles, spares par une virgule. Par dfaut, la valeur est all. Valeurs Description Autorise les robots indexer la page. Interdit aux robots d'indexer la page. Autorise les robots suivre les liens de la page. Interdit aux robots de suivre les liens de la page. Correspond "index, follow". Correspond "noindex, nofollow". Interdit aux moteurs de recherche de proposer une version de cache de la page.
index noindex follow nofollow all none noarchive
Exemple
<meta name="robots" content="index, nofollow, noarchive">
meta revisit-after \x{0097} Prcise aux robots le nombre de jours d'intervalle respecter avant leur prochaine visite sur le site. Attention, beaucoup de robots l'heure actuelle ne se rfrent plus cette balise. Exemple
<meta name="revisit-after" content="3 days">
III-D-7 - Orientez les visiteurs

meta refresh \x{0097} Permet de rafraichir la page toutes les x secondes o x est la valeur de content. Si une URL est renseigne, alors la navigateur redirigera le visiteur au bout de x secondes vers la page indique. Exemple
<meta http-equiv="refresh" content="60"> <meta http-equiv="refresh" content="0; url=http://j-willette.developpez.com/">
III-D-8 - Plus encore...

meta window-target \x{0097} Indique le cadre de destination pour l'ensemble des liens du site dans le cas d'utilisation de frames. Permet d'viter de renseigner l'attribut target sur chacun des liens.
Exemple
<meta http-equiv="window-target" content="corps">
meta pragma \x{0097} Interdit la mise en cache des pages avec son unique valeur : no-cache. Balise trs peu fiable, coupler avec une solution ct serveur. Exemple
<meta http-equiv="pragma" content="no-cache">
meta expires \x{0097} Renseigne la date d'expiration de la page, au format "JJ Mois (en anglais) AAAA". Audel de cette date, la page prcdente est recharge par le navigateur. La page peut ne jamais expirer en indiquant la valeur never. Exemple
<meta http-equiv="expires" content="never"> <meta http-equiv="expires" content="21 December 2007">
meta set-cookie \x{0097} Cre un cookie sur l'ordinateur du visiteur. Exemple

<meta http-equiv="set-cookie" content="dejavenu=oui; path=/; expires=Thursday, 14April-08 00:00:00 GMT">
meta imagetoolbar \x{0097} Supprime la barre d'outils qui s'affiche sur les images lorsque la souris pointe dessus sur Internet Explorer. Sa seule valeur est no. Exemple
<meta http-equiv="imagetoolbar" content="no">
meta site-enter \x{0097} Cre une transition l'entre du site. Ne fonctionne qu'avec Internet Explorer. meta site-exit \x{0097} Cre une transition la sortie du site. Ne fonctionne qu'avec Internet Explorer. meta page-enter \x{0097} Cre une transition l'entre de la page. Ne fonctionne qu'avec Internet Explorer. meta page-exit \x{0097} Cre une transition la sortie de la page. Ne fonctionne qu'avec Internet Explorer.
Valeurs blendTrans(duration=4) revealTrans(duration=4,transition=0) revealTrans(duration=4,transition=1) revealTrans(duration=4,transition=2) revealTrans(duration=4,transition=3) revealTrans(duration=4,transition=4) revealTrans(duration=4,transition=5) revealTrans(duration=4,transition=6) revealTrans(duration=4,transition=7) revealTrans(duration=4,transition=8) revealTrans(duration=4,transition=9) revealTrans(duration=4,transition=10) revealTrans(duration=4,transition=11) revealTrans(duration=4,transition=12) revealTrans(duration=4,transition=13) revealTrans(duration=4,transition=14) revealTrans(duration=4,transition=15) revealTrans(duration=4,transition=16) revealTrans(duration=4,transition=17) revealTrans(duration=4,transition=18) revealTrans(duration=4,transition=19) revealTrans(duration=4,transition=20) revealTrans(duration=4,transition=21) revealTrans(duration=4,transition=22) revealTrans(duration=4,transition=23) Exemple
Description Cre un fade in en entre et un fade out en sortie. Cre une transition carre entrante. Cre une transition carre sortante. Cre une transition ronde entrante. Cre une transition ronde sortane. Cr une transition rideau vers le haut. Cr une transition rideau vers le bas. Cr une transition rideau vers la droite. Cr une transition rideau vers la gauche. Cr une transition rideau multiple vers la droite. Cr une transition rideau multiple vers le bas. Cr une transition damier vers la droite. Cr une transition damier vers le bas. Cr une transition brush. Cr une transition de porte qui se ferme verticalement. Cr une transition de porte qui s'ouvre verticalement. Cr une transition de porte qui se ferme horizontalement. Cr une transition de porte qui s'ouvre horizontalement. Cr une transition diagonale NE-SO. Cr une transition diagonale SE-NO. Cr une transition diagonale NO-SE. Cr une transition diagonale SO-NE. Cr une transition par lignes horizontales. Cr une transition par lignes verticales. Cr une transition alatoire.
<meta http-equiv="page-enter" content="blendTrans(duration=2)">
Vous pouvez modifier la valeur duration comme bon vous semble, elle renseigne le temps de transition. Et encore plus... Vous avez peut-tre dj remarqu dans le code source de certains sites des balises meta qui commencent par "DC.", comme par exemple : Exemple
<meta name="dc.keywords" content="liste, de, mots, clefs">
Ces balises font partie de ce que l'on appelle le Dublin Core. Pour plus d'informations, vous pouvez lire la traduction officielle du Guide d'utilisation du Dublin Core ainsi que la liste de ces meta (en). L'ide de crer une cohrence dans la cration de mtadonnes partait d'une bonne intention, seulement elle n'a pas su s'imposer dans les moeurs cause sans doute d'une trop grande timidit sur la propagation de cette ide. De ce fait, elles ne sont pas trs utilises. Commentez l'article :
IV - Aller plus loin IV-A - Le XHTML

Vous pouvez apprendre le XHTML qui est une volution oriente XML du HTML. Cela implique par exemple d'crire les balises et attributs entirement en minuscules, de toujours fermer les balises, mme les balises simples (Ex : <br> devient <br />), mais bien videmment de changer de DOCTYPE. Pour plus d'informations concernant les diffrences entre HTML et XHTML et pour en avoir une introduction, reportezvous au tutoriel d'Adrien Pellegrini. Commentez l'article :
IV-B - Le CSS
CSS, ou "Cascading StyleSheets" est un langage qui sert mettre en forme des documents (X)HTML ou XML. A ce titre, il est beaucoup plus puissant que les balises de mises en forme vues prcdemment. Aussi, ds qu'il s'agit de prsenter des donnes dans une page, que ce soit du texte ou des blocs entiers, je vous conseille fortement de l'utiliser en lieu et place des balises obsoltes comme <font>. Pour dbuter dans ce langage, voyez plutt la section CSS de Dveloppez.com. Commentez l'article :
IV-C - Le rfrencement
Avoir une page HTML, voire un site complet maintenant que vous avez suivi ce tutoriel, c'est bien beau, mais si on ne peut pas le trouver dans Google ou tout autre moteur de recherche, a ne sert pas grand chose. Aussi, pour aller plus loin dans le dur apprentissage de la cration de sites, il faut passer par des techniques de rfrencement qui permettront notre site d'tre visible sur la toile. Ces techniques sont en perptuelle volution, donc il faudra autant que faire se peut se tenir inform des nouvelles techniques pour rester dans les meilleures places. Nous vous proposons des tutoriels complets et rgulirement rviss pour vous tenir la page de ces techniques dans notre section Webmarketing. Commentez l'article :
IV-D - Et encore plus...

Le monde du Web ne s'arrte pas au simple HTML, il existe des langages trs puissants permettant de gnrer dynamiquement du HTML ou d'intragir directement avec le visiteur. Pour connatre la suite, rendez-vous sur notre section Dveloppement Web. Commentez l'article :

Les Bases Du HTML

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Les Bases Du HTML

Încărcat de

Drepturi de autor:

Formate disponibile

Les bases du HTML

par Josselin Willette

Date de publication : 24 juillet 2009

Les bases du HTML par Josselin Willette

Les bases du HTML par Josselin Willette

Les bases du HTML par Josselin Willette

I - Introduction I-A - Introduction au HTML I-A-1 - Qu'est-ce que le HTML ?

I-A-2 - Qu'est-ce qu'une balise HTML ?

I-A-2-a - Les balises simples

I-A-2-b - Les balises doubles

Les bases du HTML par Josselin Willette

Exemple de balise double

<p>Ici du texte ou tout autre balise.</p>

I-A-2-c - Imbrication des balises

<b><u>Ici les balises sont correctement imbriques.</u></b>

Exemple de balises chevauches Commentez l'article :

I-B - Structure d'un document HTML

Les bases du HTML par Josselin Willette

Les bases du HTML par Josselin Willette

I-D - Les commentaires

II - Le corps du document - body

II-A - Les niveaux de titres

Les bases du HTML par Josselin Willette

II-B - Les paragraphes de texte

<p>Voici un premier paragraphe.</p> <p>Voici un deuxime paragraphe.</p>

II-C - La mise en forme de texte

II-C-1 - Le texte en gras

<b>Ce texte s'affichera en gras.</b>

II-C-2 - Le texte en italique

<i>Ce texte s'affichera en italique.</i>

II-C-3 - Le texte soulign

<u>Ce texte sera soulign.</u>

II-C-4 - Le texte barr

<s>Ce texte sera barr.</s>

Les bases du HTML par Josselin Willette

II-C-5 - Le texte en exposant

<sup>Ce texte sera en exposant.</sup>

II-C-6 - Le texte en indice

<sub>Ce texte sera en indice.</sub>

II-C-7 - Modifier la couleur du texte

<font color="#ff0000">Ce texte sera en rouge.</font>

II-C-8 - Modifier la police du texte

<font face="verdana">Ce texte sera en verdana.</font>

II-C-9 - Modifier la taille du texte

<font size="5">Ce texte sera en taille 5.</font>

Les bases du HTML par Josselin Willette

II-D - Les images et zones ractives II-D-1 - Les images

<img src="adresse/de/l/image" alt="Description de l'image">

II-D-2 - Les zones ractives

<img src="adresse/de/l/image" alt="Description de l'image" usemap="#nomDeLaMap">

Les bases du HTML par Josselin Willette

Structure d'une map

II-D-2-a - Les zones rectangulaires

<area shape="rect" coords="x1,x2,y1,y2" href="adresse/de/destination">

<area shape="rect" coords="10,50,60,60" href="adresse/de/destination">

II-D-2-b - Les zones circulaires

<area shape="circ" coords="x,y,rayon" href="adresse/de/destination">

<area shape="circ" coords="40,40,10" href="adresse/de/destination">

Les bases du HTML par Josselin Willette

II-D-2-c - Les zones polygonales

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,..,xn,yn" href="adresse/de/destination">

<area shape="poly" coords="0,0,40,50,78,101,17,150" href="adresse/de/destination">

Voir le rsultat Commentez l'article :

II-E - Les liens hypertextes