<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	>

<channel>
	<title>Astuces webdesign</title>
	<atom:link href="http://www.astuces-webdesign.com/feed" rel="self" type="application/rss+xml" />
	<link>http://www.astuces-webdesign.com</link>
	<description>Astuces et tutoriaux pour le webdesign</description>
	<pubDate>Thu, 16 Jul 2009 14:40:22 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Expressions régulières cours n°9</title>
		<link>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b09-455.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b09-455.html#comments</comments>
		<pubDate>Thu, 16 Jul 2009 14:37:59 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions]]></category>

		<category><![CDATA[galliot]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulières]]></category>

		<category><![CDATA[thomas]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=455</guid>
		<description><![CDATA[&#60;!&#8211; 		@page { margin: 2cm } 	&#8211;&#62;
Choix optionnels
Le point d&#8217;interrogation rend optionnel l&#8217;élément précédent dans l&#8217;expression régulière. Par ex. : colou?r matche à la fois colour et color.
Vous pouvez rendre plusieurs éléments optionnels en les regroupant dans des parenthèses, et en plaçant le point d&#8217;interrogation après la parenthèse fermée. Par ex. : Nov(ember)? Matchera Nov [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;!&#8211; 		@page { margin: 2cm } 	&#8211;&gt;</p>
<h2><span style="text-decoration: underline;">Choix optionnels</span></h2>
<p><span lang="zxx">Le point d&#8217;interrogation rend optionnel l&#8217;élément précédent dans l&#8217;expression régulière.</span> <span lang="zxx">Par ex. : colou?r matche à la fois colour et color.</span></p>
<p><span lang="zxx">Vous pouvez rendre plusieurs éléments optionnels en les regroupant dans des parenthèses, et en plaçant le point d&#8217;interrogation après la parenthèse fermée.</span> <span lang="zxx">Par ex. : Nov(ember)? Matchera Nov et November.</span></p>
<p><span lang="zxx">Vous pouvez écrire une expression régulière qui matche toute alternative en incluant plus d&#8217;un point d&#8217;interrogation.</span> <span lang="zxx">Feb(ruary)? 23(rd)? Matche February 23rd, February 23, Feb 23rd et Feb 23.</span></p>
<h2><span style="text-decoration: underline;">Un concept de regex important : l&#8217;avidité</span></h2>
<p><span lang="zxx">Le point d&#8217;interrogation est le premier métacaractère avide que j&#8217;ai introduit.</span> <span lang="zxx">Le point d&#8217;interrogation donne deux choix au regex : essayer de matcher la partie à laquelle le point d&#8217;interrogation s&#8217;applique, ou ne pas essayer de la matcher.Le moteur tentera toujours de matcher cette partie.</span> <span lang="zxx">C&#8217;est seulement si l&#8217;expression régulière échoue, que le moteur tentera d&#8217;ignorer la partie où le point d&#8217;interrogation s&#8217;applique.</span></p>
<!-- AdSense Now! V1.36 -->
<!-- Post[count: 2] -->
<div style="float:left;margin: 12px;"><script type="text/javascript"><!--
google_ad_client = "pub-9201677027528420";
/* 250x250, date de création 18/05/09 */
google_ad_slot = "1466333573";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div><p><span lang="zxx">Ce qui fait que si vous appliquez le regex 23(rd)? À la chaîne &#8220;Aujourd&#8217;hui c&#8217;est le 23rd février 2003&#8243;, le matche sera toujours le 23rd et non 23.Vous pouvez rendre le point d&#8217;interrogation paresseux (c-à-d enlever le mode avide) en ajoutant un second point d&#8217;interrogation après le premier.</span></p>
<p lang="zxx">J&#8217;en dirai plus sur l&#8217;avidité lorsque je discuterai les autres opérateurs de répétition.</p>
<h2><span style="text-decoration: underline;">Un regard sur le moteur de regex</span></h2>
<p lang="zxx">Appliquons l&#8217;expression régulière colou?r à la chaîne The colonel likes the colour green.</p>
<p><span lang="zxx">Le premier élément est le littéral c.</span> <span lang="zxx">La première position où il matche est le c de colonel.</span> <span lang="zxx">Le regex continue, et trouve que le o matche le o, le l matche l et le o matche o.</span> <span lang="zxx">Ensuite le moteur de regex vérifie si u matche n.</span> <span lang="zxx">Sans succès.</span> <span lang="zxx">Cependant le point d&#8217;interrogation indique au moteur de regex qu&#8217;il est acceptable de ne pas matcher u.</span> <span lang="zxx">Donc,le moteur va continuer vers le prochain élément du regex : r.Mais il échour également à matcher n.</span> <span lang="zxx">Alors le moteur de regex peut seulement conclure que l&#8217;expression régulière en entier ne peut pas être matchée en partant du c de colonel.</span> <span lang="zxx">Ensuite, le moteur continue en essayant de matcher c avec le premier o de colonel.</span></p>
<p><span lang="zxx">Après une série d&#8217;échecs, c va matcher c dans color, et o, l et o vont matcher les caractères suivants.</span> <span lang="zxx">Ensuite le moteur de regex vérifie si u matche r.</span> <span lang="zxx">Sans succès.</span> <span lang="zxx">Encore une fois, ce n&#8217;est pas un problème.Le point d&#8217;interrogation permet au moteur de continuer avec r.</span> <span lang="zxx">Cela matche r et le moteur rapporte que le regex a matché color dans la chaîne.</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fexpressions-regulieres-cours-n%25c2%25b09-455.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B09" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b09-455.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières cours n°8</title>
		<link>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b08-453.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b08-453.html#comments</comments>
		<pubDate>Tue, 14 Jul 2009 13:08:27 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expression]]></category>

		<category><![CDATA[galliot]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulière]]></category>

		<category><![CDATA[thomas]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=453</guid>
		<description><![CDATA[&#60;!&#8211; 		@page { margin: 2cm } 	&#8211;&#62;
Alternance avec la barre verticale
Je vous ai déjà expliqué comment utiliser les classes de caractères pour matcher un seul caractère parmi plusieurs possibles. L&#8217;alternance est similaire. Vous pouvez utiliser l&#8217;alternance pour matcher une expression régulière parmi plusieurs possibles.
Si vous voulez rechercher le texte littéral chat ou chien, séparez les [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;!&#8211; 		@page { margin: 2cm } 	&#8211;&gt;</p>
<h2><span style="text-decoration: underline;">Alternance avec la barre verticale</span></h2>
<p><span lang="zxx">Je vous ai déjà expliqué comment utiliser les classes de caractères pour matcher un seul caractère parmi plusieurs possibles.</span> <span lang="zxx">L&#8217;alternance est similaire.</span> <span lang="zxx">Vous pouvez utiliser l&#8217;alternance pour matcher une expression régulière parmi plusieurs possibles.</span></p>
<p><span lang="zxx">Si vous voulez rechercher le texte littéral chat ou chien, séparez les deux possibilités par une barre verticale.</span> <span lang="zxx">chat|chien,</span> <span lang="zxx">Si vous voulez plus de possibilités, vous pouvez allonger la liste.</span> <span lang="zxx">chat|chien|souris|poisson.</span></p>
<p><span lang="zxx">Le regex d&#8217;alternance est celui qui a la plus faible priorité des opérateurs de regex.</span> <span lang="zxx">C&#8217;est-à-dire qu&#8217;il demande au moteur de regex de matcher soit tout ce qui se trouve à gauche de la barre verticale, ou tout à droite de la barre verticale.</span> <span lang="zxx">Si vous voulez limiter la portée de l&#8217;alternance, vous devrez utiliser des parenthèses pour faire le regroupement.</span> <span lang="zxx">Si on veut améliorer le premier exemple pour matcher uniquement des mots entiers, on doit utiliser b(chat|chien)b.</span> <span lang="zxx">Le moteur de regex cherche une limite de mot, puis recherche soit &#8220;chat&#8221; soit &#8220;chien&#8221;, et ensuite une autre limite de mot.</span> <span lang="zxx">Si on avait omis les parenthèses, le moteur de regex aurait cherché &#8220;une limite de mot suivie de chat&#8221;, ou &#8220;chien suivit d&#8217;une limite de mot&#8221;.</span></p>
<h2><span style="text-decoration: underline;">N&#8217;oubliez pas que le moteur de regex est avide</span></h2>
<p><span lang="zxx">J&#8217;ai déjà expliqué comment le moteur de regex est avide</span> <span lang="zxx">Il cesse de chercher dès qu&#8217;il trouve un matche valide.</span> <span lang="zxx">Par conséquent dans certaines situations, l&#8217;ordre des alternatives est important.</span> <span lang="zxx">Supposons que vous vouliez utiliser un regex pour matcher une liste de noms de fonctions dans un langage de programmation.</span> <span lang="zxx">Get, GetValue, Set ou SetValue.</span></p>
<p><span lang="zxx">Voyons le fonctionnement lorsque la chaîne est SetValue.</span><span lang="zxx">Le regex commence au premier élément du regex, G, et au premier caractère de la chaîne, S.</span> <span lang="zxx">Il ne matche pas.</span> <span lang="zxx">Cependant le moteur de regex étudie l&#8217;expression régulière en entier avant de commencer.</span> <span lang="zxx">Donc il sait que l&#8217;expression régulière comprend des alternances, et que la regex n&#8217;a pas encore échoué.</span> <span lang="zxx">Donc il continue avec le second choix, qui est le second G dans le regex.</span> <span lang="zxx">A nouveau, cela ne matche pas.</span> <span lang="zxx">Le prochain élément est le premier S du regex.</span> <span lang="zxx">Le moteur matche, et il continue avec le prochain caractère de la chaîne, et l&#8217;élément suivent dans le regex.</span> <span lang="zxx">Le prochain élément du regex est le e après le S qui vient de matcher.</span> <span lang="zxx">E matche e.</span> <span lang="zxx">L&#8217;élément suivant, t matche t.</span></p>
<p><span lang="zxx">A cette étape, le troisième choix dans l&#8217;alternance matche.</span> <span lang="zxx">Comme le moteur regex est avide, il considère que l&#8217;alternance a matché dès qu&#8217;une option a matché.</span> <span lang="zxx">Dans cet exemple, il n&#8217;y a pas d&#8217;autres éléments dans le regex en dehors de l&#8217;alternance, donc le regex en entier a matché Set dans SetValue.</span></p>
<p><span lang="zxx">Au contraire de ce que l&#8217;on souhaitait, le regex ne matche pas la chaîne en entier.</span> <span lang="zxx">Il existe plusieurs solutions.</span> <span lang="zxx">Un choix peut être de tenir compte du fait que le moteur de regex est avide, et de changer l&#8217;ordre des options.</span> <span lang="zxx">Si n utilise GetValue|Get|SetValue|Set, SetValue sera tenté avant Set, et le moteur matchera la chaîne en entier.</span> <span lang="zxx">On peut aussi combiner les quatre choix pour en faire deux, en utilisant le point d&#8217;interrogation pour rendre une partie optionnelle.</span> <span lang="zxx">Get(Value)?|Set(Value)?.</span> <span lang="zxx">Comme le point d&#8217;interrogation est avide, SetValue sera testé avant Set.</span></p>
<p><span lang="zxx">La meilleure option est sans doute de noter que l&#8217;on veut seulement des mots complets.</span> <span lang="zxx">On ne veut pas matcher Set ou SetValue si le mot est SetValueFonction.</span> <span lang="zxx">Donc la solution est b(Get|GetValue|Set|SetValue)b ou b(Get(Value)?|Set(Value)?)b.</span> <span lang="zxx">Comme tous les choix se terminent pareil, on peut optimiser davantage avec b(Get|Set)(Value)?b.</span></p>
<p><span lang="zxx">Tous les styles de regex discuttés dans ce site sauf un fonctionnent ainsi : </span> <span lang="zxx">Le POSIX standard rend obligatoire que le matche le plus long soit retourné, quelque soit l&#8217;algorithme utilisé pour le moteur de regex.</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fexpressions-regulieres-cours-n%25c2%25b08-453.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B08" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b08-453.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières Cours n°7</title>
		<link>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b07-451.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b07-451.html#comments</comments>
		<pubDate>Mon, 13 Jul 2009 14:24:33 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions]]></category>

		<category><![CDATA[galliot]]></category>

		<category><![CDATA[perl]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulières]]></category>

		<category><![CDATA[thomas]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=451</guid>
		<description><![CDATA[&#60;!&#8211; 		@page { margin: 2cm } 	&#8211;&#62;
Limite des mots
Le métacaractère b est une ancre tout comme le puissance et le dollard. Il matche une position appelée la &#8220;limite du mot&#8221;. Ce match a une taille zéro.
Il existe trois positions considérées comme des limites de mots :


Avant le premier 	caractère dans la chaîne, si le premier [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;!&#8211; 		@page { margin: 2cm } 	&#8211;&gt;</p>
<h2><span style="text-decoration: underline;">Limite des mots</span></h2>
<p><span lang="zxx">Le métacaractère b est une ancre tout comme le puissance et le dollard.</span> <span lang="zxx">Il matche une position appelée la &#8220;limite du mot&#8221;.</span> <span lang="zxx">Ce match a une taille zéro.</span></p>
<p lang="zxx">Il existe trois positions considérées comme des limites de mots :</p>
<ul>
<li>
<p style="margin-bottom: 0cm;"><span lang="zxx">Avant le premier 	caractère dans la chaîne, si le premier caractère est un signe 	alphanumérique.</span></p>
</li>
<li>
<p style="margin-bottom: 0cm;"><span lang="zxx">Après le dernier 	caractère dans la chaîne, si le dernier caractère est 	alphanumérique.</span></p>
</li>
<li><span lang="zxx">Entre deux caractères dans la chaîne, si 	l&#8217;un est alphanumérique et que l&#8217;autre ne l&#8217;est pas.</span></li>
</ul>
<p><span lang="zxx">Pour résumer : b permet d&#8217;effectuer une recherche &#8220;mots complets uniquement&#8221; en utilisant une expression régulière de la forme bmotb.A &#8220;word character&#8221; is a character that can be used to form words.</span> <span lang="zxx">All characters that are not &#8220;word characters&#8221; are &#8220;non-word characters&#8221;.</span></p>
<p><span lang="zxx">Dans tous les styles, les caractères [a-zA-Z0-9_] sont considérés comme alphanumériques.</span> <span lang="zxx">Ils sont matchés par le raccourci de classe de caractères w.</span> <span lang="zxx">Les styles qui utilisent ASCII comme limite d emots ne reconnaît que ceux-là comme signes alphanumériques.</span> <span lang="zxx">Les styles indiquant &#8220;YES&#8221; reconnaissent les lettres et les chiffres d&#8217;autres langues ou même tout l&#8217;Unicode comme alphanumérique.</span> <span lang="zxx">Notez que Java supporte Unicode pour b mais pas pour w.</span> <span lang="zxx">Le Python propose des drapeaux pour contrôler quels caractères sont des alphanumériques (à la fois pour b et pour w).</span></p>
<p><span lang="zxx">En Perl et pour les styles de regex discuttés dans ce tutoriel, il n&#8217;existe qu&#8217;un métacaractère qui matche à la fois avant et après un mot.</span> <span lang="zxx">C&#8217;est parce qu&#8217;une position donnée ne peut pas être en même temps au début et à la fin d&#8217;un mot.</span> <span lang="zxx">L&#8217;utilisation d&#8217;un seul opérateur rend les choses plus faciles pour vous.</span></p>
<p><span lang="zxx">Comme les chiffres sont considérés comme des alphanumériques, b4b peut matcher un 4 qui ne fait pas partie d&#8217;un nombre plus grand.</span> <span lang="zxx">Ce regex ne matchera pas 44 feuilles de a4.</span> <span lang="zxx">Donc &#8220;b matche avant et après une séquence alphanumérique&#8221; est plus juste que de dire &#8220;avant et après chaque mot&#8221;.</span></p>
<h2><span style="text-decoration: underline;">Les limites de mots négativées</span></h2>
<p><span lang="zxx">B est la version négativée de b.</span> <span lang="zxx">B matche sur toutes les positions où b ne matche pas.</span> <span lang="zxx">En pratique, B matche sur toute position entre deux caractères de mots, de même que pour toute position entre deux caractères non alphanumériques.</span></p>
<h2><span style="text-decoration: underline;">Un regard sur le moteur de regex</span></h2>
<p><span lang="zxx">Voyons ce que arrive lorsque l&#8217;on applique le regex bîleb à la chaîne Cette île est belle.</span> <span lang="zxx">Le moteur commence avec le premier élément b sur le premier caractère C.</span> <span lang="zxx">Comme cet élément a une taille zéro, la position avant le caractère est inspectée.</span> <span lang="zxx">b matche ici, parce que le C est un alphanumérique et le caractère avant lui est le vide avant le début de la chaîne.</span> <span lang="zxx">Le moteur continue avec l&#8217;élément suivant :</span> <span lang="zxx">Le e littéral.</span> <span lang="zxx">Comme l&#8217;élément précédent avait une taille zéro, le moteur de regex n&#8217;avance pas au caractère suivant dans la chaîne.</span> <span lang="zxx">I ne matche pas C, donc le moteur retente le premier élément sur la prochaine position de caractère.</span></p>
<p><span lang="zxx">b ne matche pas entre le C et le e.</span> <span lang="zxx">Il ne matche pas non plus entre e et t, ni entre t et t, ni même entre t et e.</span></p>
<p><span lang="zxx">Le prochain caractère dans la chaîne est un espace.</span> <span lang="zxx">b matche ici parce que l&#8217;espacement n&#8217;est pas un caractère alphanumérique, et que le caractère précédent en est un.</span> <span lang="zxx">De nouveau le moteur poursuit avec le i qui ne matche pas l&#8217;espacement.</span></p>
<p><span lang="zxx">Il avance d&#8217;un caractère et repart sur le premier élément regex ; b matche entre l&#8217;espacement et le î de la chaîne.</span> <span lang="zxx">Le regex continue, et trouve que le î matche le î, le l matche l et le e matche e.</span> <span lang="zxx">Le dernier élément du regex est b, qui matche également à la position avant le second espacement car l&#8217;espacement n&#8217;est pas un alphanumérique et le caractère avant lui en est un.</span> <span lang="zxx">This fails because this position is between two word characters.</span> <span lang="zxx">Again, the b fails to match and continues to do so until the second space is reached.</span> <span lang="zxx">It matches there, but matching the i fails.</span></p>
<p><span lang="zxx">But b matches at the position before the third i in the string.</span> <span lang="zxx">The engine continues, and finds that i matches i and s matches s.</span> <span lang="zxx">The last token in the regex, b, also matches at the position before the third space in the string because the space is not a word character, and the character before it is.</span></p>
<p><span lang="zxx">The engine has successfully matched the word is in our string, skipping the two earlier occurrences of the characters i and s.</span> <span lang="zxx">If we had used the regular expression is, it would have matched the is in This.</span></p>
<h2><span style="text-decoration: underline;">Limite des mots Tcl</span></h2>
<p><span lang="zxx">Les limites des mots, tels que décrits ci-dessus, sont supportées par tous les styles de regex décrits sur ce site web, à l&#8217;exception des deux style POSIX RE et des commandes regex Tcl.</span> <span lang="zxx">POSIX ne supporte pas du tout les limites de mots.</span> <span lang="zxx">Tcl utilise une syntaxe différente.</span></p>
<p><span lang="zxx">En Tcl, b matche un caractère de backspace, tout comme x08 dans la plupart des styles de regex (y compris Tcl).</span> <span lang="zxx">B matche un backslash simple en Tcl, tout comme \ dans tous les autres styles regex (incluant Tcl).</span></p>
<p><span lang="zxx">Tcl utilise la lettre &#8220;y&#8221; au lieu de la lettre &#8220;b&#8221; pour matcher les limites de mots.</span> <span lang="zxx">y matche toute position de limite de mot, tandis que Y matche toute position qui n&#8217;est pas une limite de mot.</span> <span lang="zxx">Ces éléments de regex Tcl matchent exactement comme b et B dans les styles de regex Perl.</span> <span lang="zxx">Ils ne distinguent pas entre le début et la fin d&#8217;un mot.</span></p>
<p><span lang="zxx">Tcl a deux autres éléments de limite de mots qui distinguent entre le début et la fin d&#8217;un mot.</span> <span lang="zxx">m matche uniquement le début d&#8217;un mot.</span> <span lang="zxx">C&#8217;est-à-dire qu&#8217;il matche toute position avec un caractère non alphanumérique à sa gauche, et un caractère alphanumérique à sa droite.</span> <span lang="zxx">Il matche également le début de la chaîne, si le premier caractère est un signe alphanumérique.</span> <span lang="zxx">M matche uniquement la fin d&#8217;un mot.</span> <span lang="zxx">C&#8217;est-à-dire qu&#8217;il matche toute position avec un caractère alphanumérique à sa gauche, et un caractère non alphanumérique à sa droite.</span> <span lang="zxx">Il matche également à la fin de la chaîne si le dernier caractère de la chaîne est un caractère alphanumérique.</span></p>
<p><span lang="zxx">Le seul moteur regex qui supporte le style Tcl de limites de mots (à part Tcl bien sûr) est le moteur Jgsoft.</span> <span lang="zxx">Dans PowerGREP et EditPad Pro, b et B sont des limites de mots style Perl, et y, Y, m et M sont deslimites de mots style Tcl.</span></p>
<p><span lang="zxx">Dans la plupart des cas, l&#8217;absence d&#8217;éléments m et M n&#8217;est pas un problème.</span> <span lang="zxx">ywordy ou mwordM trouvent une occurence &#8220;mots complets uniquement&#8221;.</span> <span lang="zxx">Mwordm ne matche nulle part, puisque M ne matche jamais sur une position suivie par un caractère alphanumérique, et m jamais à une position précédée par ce genre de caractères.</span> <span lang="zxx">Si votre expression régulière a besoin de matcher des caractères avant ou après y, vous pouvez facilement spécifier dans le regex si ces caractères doivent être alphanumériques ou non.</span> <span lang="zxx">Par ex. Si vous voulez matcher tout mot, yw+y donnera le même résultat que m.+M.L&#8217;utilisation de w à la place du point force automatiquement le premier y au début d&#8217;un mot, et le second y à la fin d&#8217;un mot.</span> <span lang="zxx">Notez que y.+y ne fonctionne pas.</span> <span lang="zxx">Ce regex matche chaque mot, et aussi chaque séquence non alphanumérique entre les mots dans la chaîne visée.</span> <span lang="zxx">Cela dit, si votre style supporte m et M, le moteur de regex peut faire tourner mw+M légèrement plus rapidement que yw+y, suivant l&#8217;optimisation interne.</span></p>
<p><span lang="zxx">Si votre style de regex supporte lookahead et lookbehind, vous pouvez utiliser (?&lt;!w)(?=w) pour émuler le m de Tcl et (?&lt;=w)(?!w) pour émuler M.</span> <span lang="zxx">Bien que plus verbeux, ces constructions matchent exactement pareil que les limites de mots de Tcl.</span></p>
<p><span lang="zxx">Si votre style a un lookahead mais pas de lookbehind, et qu&#8217;il a aussi des limites de mots style Perl, vous pouvez utiliser b(?=w) pour émuler le Tcl m, et b(?!w) pour émuler M.</span> <span lang="zxx">b matche au début ou à la fin d&#8217;un mot, et le lookahead vérifie si le caractère suivant fait partie d&#8217;un mot ou pas.</span> <span lang="zxx">Si c&#8217;est le cas, on est au début d&#8217;un mot.</span> <span lang="zxx">Sinon, on est à la fin d&#8217;un mot.</span></p>
<h2><span style="text-decoration: underline;">Limite des mots GNU</span></h2>
<p><span lang="zxx">L&#8217;extention GNU aux expressions régulières POSIX rajoute un support pour les limites b et B, comme décrites plus haut.</span> <span lang="zxx">GNU utilise également sa propre syntaxe pour les limites de début de mot et de fin de mot.</span> <span lang="zxx">&lt; matche le début d&#8217;un mot, comme le Tcl m.</span> <span lang="zxx">&gt; matche la fin d&#8217;un mot, comme le Tcl M.<br />
</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fexpressions-regulieres-cours-n%25c2%25b07-451.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20Cours%20n%C2%B07" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b07-451.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Réaliser un iPod sous Photoshop</title>
		<link>http://www.astuces-webdesign.com/actualites/realiser-un-ipod-sous-photoshop-447.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/realiser-un-ipod-sous-photoshop-447.html#comments</comments>
		<pubDate>Wed, 08 Jul 2009 19:34:59 +0000</pubDate>
		<dc:creator>Hysteria</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=447</guid>
		<description><![CDATA[

Vous avez besoin d&#8217;un lecteur mp3 pour l&#8217;une de vos créa.
Mais vous ne voulez pas n&#8217;importe lequel.

Vous voulez l&#8217;iPod.

Le vrai.

Alors rendez-vous sur : avivadirectory
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.avivadirectory.com/photoshop/wp-content/uploads/2007/09/ipod_classic_photoshoplovr.jpg" alt="" /><br />
<em></em></p>
<p>Vous avez besoin d&#8217;un lecteur mp3 pour l&#8217;une de vos créa.<br />
Mais vous ne voulez pas n&#8217;importe lequel.<br />
<em></em><br />
Vous voulez l&#8217;iPod.<br />
<em></em><br />
Le vrai.<br />
<em></em><br />
Alors rendez-vous sur : <a href="http://www.avivadirectory.com">avivadirectory</a></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Frealiser-un-ipod-sous-photoshop-447.html&amp;linkname=R%C3%A9aliser%20un%20iPod%20sous%20Photoshop" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/realiser-un-ipod-sous-photoshop-447.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>40 fontes handWriting HQ</title>
		<link>http://www.astuces-webdesign.com/actualites/40-fontes-handwriting-hq-442.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/40-fontes-handwriting-hq-442.html#comments</comments>
		<pubDate>Wed, 08 Jul 2009 19:29:53 +0000</pubDate>
		<dc:creator>Hysteria</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[Flash]]></category>

		<category><![CDATA[Graphisme 2d]]></category>

		<category><![CDATA[Illustrator]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=442</guid>
		<description><![CDATA[

C&#8217;est tout nouveau, c&#8217;est tout chaud.

Hongkiat publie une liste des meilleures polices de caractères &#8220;handwriting&#8221;.

Pour les télécharger suivez le lien : Ici


Hysteria &#38; astuces-webdesign.com
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.myfonts.com/images/email-content/sp-200601/best10fonts2005.gif" alt="" /><br />
<em></em><br />
C&#8217;est tout nouveau, c&#8217;est tout chaud.<br />
<em></em><br />
Hongkiat publie une liste des meilleures polices de caractères &#8220;handwriting&#8221;.<br />
<em></em><br />
Pour les télécharger suivez le lien : <a href="http://www.hongkiat.com/blog/40-free-high-quality-hand-drawn-fonts/">Ici</a><br />
<em></em><br />
<em></em><br />
Hysteria &amp; astuces-webdesign.com</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2F40-fontes-handwriting-hq-442.html&amp;linkname=40%20fontes%20handWriting%20HQ" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/40-fontes-handwriting-hq-442.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières cours n°6</title>
		<link>http://www.astuces-webdesign.com/programmation/les-expressions-regulieres-cours-n%c2%b06-438.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/les-expressions-regulieres-cours-n%c2%b06-438.html#comments</comments>
		<pubDate>Wed, 08 Jul 2009 13:50:41 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions]]></category>

		<category><![CDATA[galliot]]></category>

		<category><![CDATA[perl]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulières]]></category>

		<category><![CDATA[thomas]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=438</guid>
		<description><![CDATA[&#60;!&#8211; 		@page { margin: 2cm } 	&#8211;&#62;
Les ancres de début et de fin de chaîne
Jusque-là, je vous ai expliqué les caractères littéraux et les classes de caractères. Pour chacun d&#8217;eux, son ajout dans un regex force le moteur de regex à matcher un seul caractère.
Les ancres se comportent différemment. Elles ne matchent aucun caractère. Au [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;!&#8211; 		@page { margin: 2cm } 	&#8211;&gt;</p>
<h2><span style="text-decoration: underline;">Les ancres de début et de fin de chaîne</span></h2>
<p><span lang="zxx">Jusque-là, je vous ai expliqué les caractères littéraux et les classes de caractères.</span> <span lang="zxx">Pour chacun d&#8217;eux, son ajout dans un regex force le moteur de regex à matcher un seul caractère.</span></p>
<p><span lang="zxx">Les ancres se comportent différemment.</span> <span lang="zxx">Elles ne matchent aucun caractère.</span> <span lang="zxx">Au lieu de cela, elles matchent une position avant, après ou à l&#8217;intérieur des caractères.</span> <span lang="zxx">Elles peuvent être utilisées pour &#8220;ancrer&#8221; le matche du regex à une position donnée.</span> <span lang="zxx">Le puissance matche la position avant le premier caractère dans la chaîne.</span> <span lang="zxx">Appliquer ^a sur abc matche a.</span> <span lang="zxx">^b ne matche pas du tout abc, parce que le b n&#8217;est pas juste après le début de la chaîne, matché par ^.</span> <span lang="zxx">Voir ci-dessous le fonctionnement interne du moteur de regex.</span></p>
<p><span lang="zxx">De même, $ matche juste après le dernier caractère de la chaîne.</span> <span lang="zxx">C$ matche c dans abc, alors que a ne matche pas du tout.</span></p>
<h2><span style="text-decoration: underline;"><br />
Applications utiles</span></h2>
<p><span lang="zxx">Lorsqu&#8217;on utilise des expressions régulières pour valider la saisie de l&#8217;utilisateur avec un langage de programmation, l&#8217;usage des ancres est très important.</span> <span lang="zxx">Si vous utilisez le code si($input =~ m/d+/) dans un script Perl pour voir si l&#8217;utilisateur a bien entré un nombre, il acceptera la saisie même si l&#8217;utilisateur a tapé qsdf4ghjk, car d+ matche le 4.</span> <span lang="zxx">Le bon regex est ^d+$.</span> <span lang="zxx">Comme &#8220;début de chaîne&#8221; doit être matché avant d et &#8220;fin de chaîne&#8221; doit être matché juste après, la chaîne entière doit être constituée de chiffres pour que d+$ puisse matcher.</span></p>
<p><span lang="zxx">Cela arrive couramment que l&#8217;utilisateur tape des espaces involontaires.</span> <span lang="zxx">Lorsque Perl traite une ligne dans un fichier texte, le saut de ligne sera également stocké dans la variable.</span> <span lang="zxx">Alors avant de valider la saisie, une bonne pratique est de couper les espaces avant et après la chaîne.</span> <span lang="zxx">^s+ matche les espaces avant et s+$ matche les espaces après la chaîne.</span> <span lang="zxx">En Perl, vous pouvez utiliser $input =~ s/^s+|s+$//g.</span> <span lang="zxx">Une utilisation appropriée et /g permet de tout faire en une seule ligne de code.</span></p>
<p lang="zxx">Utiliser ^ et $ comme ancres de début et de fin de ligne</p>
<p><span lang="zxx">Si vous avez une chaîne consistués de lignes multiples, comme première lignenseconde ligne (où n indique un saut de ligne), il est souvent désirable de travailler avec des lignes, plutôt qu&#8217;avec la chaîne entière.</span> <span lang="zxx">D&#8217;ailleurs, tous les moteurs de regex présentés dans ce tutoriel ont l&#8217;occasion d&#8217;étendre le sens de chaque ancre.</span> <span lang="zxx">^ peut alors matcher le début de la chaîne (avant le p dans la chaîne ci-dessus), ainsi qu&#8217;après chaque saut de ligne (entre n et s).</span> <span lang="zxx">De même, $ matchera toujours à la fin de la chaîne (après le dernier e), et aussi avant chaque saut de ligne (entre e et n).</span></p>
<p><span lang="zxx">Dans chaque éditeur comme EditPad Pro ou GNU Emacs, et les outils regex comme PowerGREP, le puissance et le dollard matchent toujours à la fin et au début de chaque ligne.</span> <span lang="zxx">C&#8217;est logique, car ces éditeurs sont faits pour travailler sur des fichiers entiers, pas sur des chaînes courtes.</span></p>
<p><span lang="zxx">Dans tous les languages de programmation, à l&#8217;exception de Ruby, vous devez explicitement activer cette fonction.</span> <span lang="zxx">Elle est communément appelée le &#8220;mode multi lignes&#8221;.</span> <span lang="zxx">Vous pouvez activer le mode ligne simple en ajoutant u s après le code de regex, comme ceci : m/^regex$m ;. Dans .NET, l&#8217;ancre matche avant et après chaque retour à la ligne lorsque vous spécifiez RegexOptions.Multiline, comme dans Regex.Match(&#8221;string&#8221;,&#8221;regex&#8221;, RegexOptions.Multiline).</span></p>
<h2><span style="text-decoration: underline;"><br />
Les ancres permanentes de début et de fin de chaîne</span></h2>
<p><span lang="zxx">A ne matche qu&#8217;en début de chaîne.</span> <span lang="zxx">De même, Z ne matche qu&#8217;en fin de chaîne.</span> <span lang="zxx">Ces deux éléments ne matchent jamais les sauts de ligne.</span> <span lang="zxx">Cela reste vrai dans tous les styles de regex discutés dans ce tutoriel, même avec le &#8220;mode multiligne&#8221; activé.</span> <span lang="zxx">Dans EditPad Pro et PowerGREP, où le puissance et le dollard matchent toujours à la fin et au début de chaque ligne, A et Z matchent seulement au début et à la fin du fichier entier.</span></p>
<p><span lang="zxx">Javascript, POSIX et XML ne supportent pas A et Z.</span> <span lang="zxx">Vous êtes obligé d&#8217;utiliser le puissance et le dollar pour cet objectif.</span></p>
<p lang="zxx">Les extentions GNU des expressions régulières POSIX utilisent `(backtick) pour matcher le début de la chaîne et &#8216; (apostrophe) pour matcher la fin de la chaîne.</p>
<h2><span style="text-decoration: underline;"><br />
Matches vides</span></h2>
<p><span lang="zxx">Nous avons vu que les ancres matchent une position, plus qu&#8217;un caractère.</span> <span lang="zxx">Cela signifie que lorsqu&#8217;un regex est constitué d&#8217;une ancre ou plus, il peut finir en un match vide.</span> <span lang="zxx">Selon la situation, cela peut être très utile ou très mauvais.</span> <span lang="zxx">Utiliser ^d*$ pour tester si l&#8217;utilisateur a entré un nombre (notez l&#8217;usage du * à la place du +), force le script à accepter une chaîne vide comme une entrée correcte.</span> <span lang="zxx">Voir ci-dessous.</span></p>
<p><span lang="zxx">Cependant, matcher seulement une position peut être très pratique.</span> <span lang="zxx">Dans les emails, par exemple, il est commun d&#8217;utiliser un symmbole &#8220;plus grand que&#8221; et un espacement à chaque ligne du message précédent.</span> <span lang="zxx">En VB.NET, on peut le faire facilement avec DIM Quoted as String = Regex.Replace(Original, &#8220;^&#8221;, &#8220;&gt; &#8220;, RegexOptions.Multilines).</span> <span lang="zxx">On utilise le mode multilignes, pour que le regex ^ matche le début du message précédent, et après chaque retour à la ligne.</span> <span lang="zxx">La méthode Regex.Replace va enlever le match regex de la chaîne, et insérer la chaîne de remplacement (symbole plus grand que et espacement).</span> <span lang="zxx">Comme le matche n&#8217;inclut aucun caractère, on n&#8217;efface rien.</span> <span lang="zxx">Cependant, le matche comprend une position de départ, et la chaîne de remplacement est ajoutée là, comme on le voulait.</span></p>
<h2><span style="text-decoration: underline;"><br />
Les chaînes qui finissent par un saut de ligne</span></h2>
<p><span lang="zxx">Bien que Z et $ ne matchent qu&#8217;en fin de chaîne (lorsque l&#8217;option pour que le puissance et le dollard matchent les sauts de ligne dans la chaîne est désactivée), il existe une exception.</span> <span lang="zxx">Si la chaîne finit avec un saut de ligne, alors Z et $ matcheront la position juste avant ce dernier, plutôt qu&#8217;à la fin de la chaîne.</span> <span lang="zxx">Cette &#8220;amélioration&#8221; a été introduite par Perl, et elle est copiée par de nombreux styles de regex tels que Java, .NET, et PCRE.</span> <span lang="zxx">En Perl, quand on lit une ligne dans un fichier, la chaîne lue se finira par un saut de ligne.</span> <span lang="zxx">Si on lit une ligne d&#8217;un fichier contenant le texte &#8220;joe&#8221; on obtient la chaîne joen.</span> <span lang="zxx">Lorsqu&#8217;on les applique à cette chaîne, ^[a-z]+$ et A[a-z]+Z matcheront tous deux joe.</span></p>
<p><span lang="zxx">Si vous voulez un matche à la fin véritable de la chaîne, utilisez z (un z en bas de casse plutôt qu&#8217;en haut de casse).</span> <span lang="zxx">A[a-z]+z ne matche pas joen.</span> <span lang="zxx">z matche après le saut de ligne, et celui-ci n&#8217;est pas supporté par la classe de caractères.</span></p>
<h2><span style="text-decoration: underline;"><br />
Un regard sur le moteur de regex</span></h2>
<p><span lang="zxx">Voyons ce qui peut arriver quand on essaie de matcher ^4$ à 749n486n4 (où n correspond à un caaractère de saut de ligne) en mode multiligne.</span> <span lang="zxx">Comme d&#8217;habitude, le moteur commence au premier caractère : 7.</span><tt><span lang="zxx">Le premier élément dans l&#8217;expression régulière est ^. Comme c&#8217;est un élément de taille zéro, le moteur n&#8217;essaie pas de le matcher à un caractère, mais plutôt avec la position avant le caractère que le moteur a atteint. ^ matche effectivement la position avant le 7. Le moteur avance ensuite à l&#8217;élément suivant : 4. </span></tt><tt><span lang="zxx">4.</span></tt> <span lang="zxx">Comme l&#8217;élément précédent avait une taille zéro, le moteur de regex n&#8217;avance pas au caractère suivant dans la chaîne.</span> <span lang="zxx">Il reste à 7.</span> <span lang="zxx">4 est un caractère littéral, qui ne matche pas 7.</span> <span lang="zxx">Il n&#8217;y a pas d&#8217;autres permutations du regex, donc le moteur recommence avec le premier élément du regex, avec le caractère suivant.</span> <span lang="zxx">4.</span> <span lang="zxx">Cette fois, ^ ne matche pas la position avant le 4.</span> <span lang="zxx">Cette position est précédée par un caractère, et ce n&#8217;est pas un saut de ligne.</span> <span lang="zxx">Le moteur continue avec 9 et échoue encore.</span> <span lang="zxx">La tentative suivant en n, échoue également.</span> <span lang="zxx">De nouveau, la position avant le n est précédée par un caractère, 9, et ce n&#8217;est pas un saut de ligne.</span></p>
<p><span lang="zxx">Ensuite, le moteur regex arrive au second 4 de la chaîne.</span> <span lang="zxx">Le ^ matche la position avant le 4, car elle est précédée d&#8217;un caractère de saut de ligne.</span> <span lang="zxx">De nouveau, le moteur regex avance à l&#8217;élément suivant, 4,mais il n&#8217;avance pas au caractère suivant dans la chaîne.</span> <span lang="zxx">4 matche 4, et le moteur regex avance l&#8217;élément regex et le caractère de la chaîne.</span> <span lang="zxx">Alors le moteur tente de matcher $ avec la position avant (eh oui : avant) le 8.</span><span lang="zxx">Le $  ne peut pas matcher ici, car cette position est suivie d&#8217;un caractère, et ce caractère n&#8217;est pas un saut de ligne.</span></p>
<p><span lang="zxx">Encore une fois, le moteur doit tenter de matcher de nouveau le premier élément.</span> <span lang="zxx">Précédemment, il avait matché le second 4, donc le moteur continue au prchain caractère, 8, et le ^ ne matche pas.</span> <span lang="zxx">Pareil pour le 6 et la nouvelle ligne.</span></p>
<p><span lang="zxx">Finallement, le regex tente de matcher le premier élément avec le troisième 4 de la chaîne.</span> <span lang="zxx">Cela fonctionne.</span> <span lang="zxx">Ensuite, le moteur matche 4 et 4.</span> <span lang="zxx">L&#8217;élément de regex courant est avancé à $, et le caractère courant est avancé à la toute dernière position dans la chaîne :</span> <span lang="zxx">le vide après la chaîne.</span> <span lang="zxx">Aucun élément de regex qui a besoin d&#8217;un élément pour matcher ne peut matcher ici.</span> <span lang="zxx">Même une classe de caractères négationnée.</span> <span lang="zxx">Cependant, on essaie de matcher un dollard, et ce dollard est un drôle d&#8217;animal.</span> <span lang="zxx">Il a une largeur de zéro, donc il essaiera de matcher la position avant le caractère courant.</span> <span lang="zxx">Cela ne change rien que ce &#8220;caractère&#8221; soit le vide après la chaîne.</span> <span lang="zxx">En faite, le dollard va matcher le caractère courant.</span> <span lang="zxx">Ce doit être soit un saut de ligne, soit le vide après la chaîne pour que le $ matche la position avant le caractère courant.</span> <span lang="zxx">Comme c&#8217;est le cas dans l&#8217;exemple, le dollard matche correctement.</span></p>
<p lang="zxx">Comme $ était le dernier élément de la chaîne, le moteur a trouvé un matche : le dernier 4 dans la chaîne.</p>
<h2><span style="text-decoration: underline;"><br />
Un autre regard</span></h2>
<p><span lang="zxx">Plus tôt j&#8217;ai mentionné que ^d*$ pouvait matcher une chaîne vide.</span> <span lang="zxx">Voyons comment.</span></p>
<p><span lang="zxx">Il n&#8217;y a qu&#8217;une position de “caractère” dans une chaîne vide : le vide après la chaîne.</span><span lang="zxx">Le premier élément du regex est ^.</span> <span lang="zxx">Il matche la position avant le vide après la chaîne, car il est précédé par le vide avant la chaîne.</span> <span lang="zxx">L&#8217;élément suivant est d*.</span> <span lang="zxx">Comme nous verrons plus tard, un des effets de * est que dans ce cas, il rend le d optionnel.</span> <span lang="zxx">Le moteur tentera de matcher le d avec le vide après la chaîne.</span> <span lang="zxx">Cela échoue, mais le * change l&#8217;échec de d en un succès de taille zéro.</span> <span lang="zxx">Le moteur va alors avancer vers l&#8217;élément suivant, sans avancer la position dans la chaîne.</span> <span lang="zxx">Le moteur arrive ainsi au $, et au vide après la chaîne.</span> <span lang="zxx">Nous avons déjà vu que ces deux-là matchent.</span> <span lang="zxx">Arrivé là, le regex matche la chaîne vide, et le moteur rapporte un succès.<br />
</span></p>
<h2><span style="text-decoration: underline;">Note pour les programmeurs</span></h2>
<p><span lang="zxx">Une expression régulière comme un $ seul peut très bien matcher la chaîne.</span> <span lang="zxx">Si vous interrogez alors le moteur sur la position du caractère, il retournerait la longueur de la chaîne si l&#8217;indice des chaînes part de zéro, ou la longueur +1 si l&#8217;indice de la chaîne part de de un suivant votre langage de programmation.</span> <span lang="zxx">Si vous interrogez le moteur sur la longueur du matche, il retournera zéro.</span></p>
<p><span lang="zxx">Ce dont vous devez vous méfier, c&#8217;est que String[Regex.MatchPosition] peut causer une violation d&#8217;accès ou une faute d&#8217;erreur de segmentation, car MatchPosition peut pointer sur le vide après la chaîne.</span> <span lang="zxx">Cela peut aussi arriver avec ^ et ^$ si le dernier caractère de la chaîne est un saut de ligne.</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fles-expressions-regulieres-cours-n%25c2%25b06-438.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B06" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/les-expressions-regulieres-cours-n%c2%b06-438.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Concours adwords fini</title>
		<link>http://www.astuces-webdesign.com/actualites/concours-adwords-fini-435.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/concours-adwords-fini-435.html#comments</comments>
		<pubDate>Wed, 08 Jul 2009 08:15:07 +0000</pubDate>
		<dc:creator>Jedfolio</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[adwords]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=435</guid>
		<description><![CDATA[Voila le concours adwords pour tenter de gagner un des 2 coupons adwords de 50 euros chacun, est fini. Il n&#8217;y a eu malheureusement pas autant de participants que nous le souhaitions. Mais ne vous inquiétez pas, ces 2 coupons, seront remis sur le tapis d&#8217;ici quelques temps pour la plus grande joie de certains.
Ceux [...]]]></description>
			<content:encoded><![CDATA[<p>Voila le concours adwords pour tenter de gagner un des 2 coupons adwords de 50 euros chacun, est fini. Il n&#8217;y a eu malheureusement pas autant de participants que nous le souhaitions. Mais ne vous inquiétez pas, ces 2 coupons, seront remis sur le tapis d&#8217;ici quelques temps pour la plus grande joie de certains.</p>
<p>Ceux qui m&#8217;ont envoyé un message privé pour tenter de gagner les coupons, la règle était qu&#8217;il fallait laisser un commentaire à la news.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Fconcours-adwords-fini-435.html&amp;linkname=Concours%20adwords%20fini" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/concours-adwords-fini-435.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Bases du référencement</title>
		<link>http://www.astuces-webdesign.com/actualites/bases-du-referencement-430.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/bases-du-referencement-430.html#comments</comments>
		<pubDate>Tue, 07 Jul 2009 10:46:48 +0000</pubDate>
		<dc:creator>Jedfolio</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[Référencement]]></category>

		<category><![CDATA[adwords]]></category>

		<category><![CDATA[astuces]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=430</guid>
		<description><![CDATA[Sur internet, il y a des millions de sites internet, qu&#8217;ils soient professionnels ou particuliers. Nous pouvons retrouver des multitudes de sites boutique en tout genre, des blogs à foison, des sites vitrine etc&#8230; Pour pouvoir se retrouver sur la toile parmis tous ces sites, il y a les annuaires et les moteurs de recherches.
La [...]]]></description>
			<content:encoded><![CDATA[<p>Sur internet, il y a des millions de sites internet, qu&#8217;ils soient professionnels ou particuliers. Nous pouvons retrouver des multitudes de sites boutique en tout genre, des blogs à foison, des sites vitrine etc&#8230; Pour pouvoir se retrouver sur la toile parmis tous ces sites, il y a les annuaires et les moteurs de recherches.</p>
<p><strong>La différence qu&#8217;il faut connaître avant de continuer entre les annuaires et les moteurs de recherches :</strong></p>
<ul>
<li>un annuaire va classer les sites internet selon différentes thématiques afin de les classer plus facilement par critères. Sa base de données est constituée de catégories et sous-catégories jusqu&#8217;à cibler la catégorie la plus pertinante. Les annuaires les plus connus sont : Dmoz, Yahoo, Nomade</li>
</ul>
<ul>
<li>un moteur de recherche va classer les sites selon divers mots-clefs et afficher ensuite la liste avec un classement de pertinance. Votre site sera affiché quand un internaute fera une recherche par mot-clef en rapport avec votre site. Les moteurs de recherche les plus connus sont :Google, Voila, Altavista</li>
</ul>
<p>Pour le référencement, ces 2 catégories de sites sont assez importantes. Il en existe pleins des annuaires sur internet, certains vont vous servir, d&#8217;autres beaucoup moins (genre un annuaire de site d&#8217;éleveur de mamouth à poil long en moldavie&#8230; surtout s&#8217;il n&#8217;y a que 3 sites inscrits dessus). Vous devrez faire le tri après en avoir recherché quelques uns, histoire de ne pas perdre de temps sur 10 000 annuaires (mieux vaut 3 annuaires compétents et pertinants qui vont vous attirer du monde, que 100 annuaires invisibles).</p>
<p>Les moteurs de recherche seront une partie très prenante de votre travail, car les moteurs de recherche vous classent selon des algorithmes qui changent assez souvent, pour éviter toutes tricheries.</p>
<p>Votre référencement ne doit pas s&#8217;improviser à la fin, mais être réfléchi dès le début, car le fond et la forme de votre site auront un impact sur votre classement.</p>
<p><strong>Voici quelques règles générales à respecter :</strong></p>
<ul>
<li>avant de référencer votre site, il est impératif d&#8217;avoir un site internet terminé. Si vous pensiez vous avancer sur le référencement en le soumettant avant de l&#8217;avoir fini, vous avez tout faux. Les annuaires vont vous refuser votre site internet, et les moteurs de recherche ne vous classeront pas.</li>
</ul>
<ul>
<li>Alterner textuels et images car un site composé d&#8217;images sans textes, ne sera pas pertinent envers un annuaire, vous serez donc noyé dans la masse. Préférer mettre un texte en dehors de l&#8217;image, même si l&#8217;image comporte du texte, les moteurs de recherche ne pourront pas le voir.</li>
</ul>
<ul>
<li>Ayez un vrai nom de domaine. Les redirections genre &#8220;.fr.st etc&#8221;, ou l&#8217;hébergement sur des sites gratuits genre &#8220;monsite.free.fr, monsite.site.voila.fr&#8221; ne vous seront pas du tout favorable.  Si vous voulez vraiment être présent sur internet, il vous faudra faire un peu de frais. Un nom de domaine ne coute pas si cher, certains sites vous le proposent à 15 euros l&#8217;année, ce qui est une dépense vraiment dérisoire pour commencer le référencement. Pour votre hébergement, les sites d&#8217;hébergement gratuit ne sont pas toujours performant (temps de réponse un peu long), certains hébergeurs (exemple : ovh, amen, 1and1 etc) peuvent vous proposer plusieurs offres d&#8217;hébergements à moindre prix.</li>
</ul>
<ul>
<li>Eviter la multitude de liens sortant. Avoir des partenaires, peut être bénéfique, mais avoir un site internet avec une multitude de liens (comme par exemple les maillots de foot bardés de pub à outrance) vous fera descendre aux yeux des moteurs de recherche.</li>
</ul>
<ul>
<li>Eviter les adresses de pages du genre : index.php?categorie=bio&amp;page=2&amp;action=lire. Il vous faudra simplifier grande cette url, le passage de variables de ce genre n&#8217;est d&#8217;une part, pas sécuritaire pour vos sites car on voit quelles variables sont utilisées, et les moteurs de recherches ont énormément de mal à récupérer les mots clefs dans ce type d&#8217;adresse.</li>
</ul>
<p><strong>Quelques règles de base sur votre site internet :</strong></p>
<ul>
<li>faites des titres de pages pertinents et changeant selon la page affichée. Eviter un titre de page de ce type :</li>
</ul>
<p>Monsite -&gt; je vous présente mes dernières créations photo et webdesign faites le jour de l&#8217;éclipse polaire en moldavie</p>
<p style="text-align: justify;">Les titres de pages doivent comporter des mots clefs afin de montrer aux moteurs de recherche sur quels mots vous voulez sortir, et sur quel thème porte la page. exemple : Créations - photo - webdesign - monsite. N&#8217;oubliez pas de changer les mots clefs selon la page, et toujours mettre des mots clefs en rapport; si on est sur votre page de créations photo, éviter de mettre des mots clefs du genre : Photos - appareil leica - 300euros - reflex</p>
<p style="text-align: justify;">
<ul>
<li>Hierachisez vos titres à l&#8217;intérieur des pages. N&#8217;oubliez surtout pas les balises &lt;h1&gt;, et si vous voulez mettre plusieurs titres en avant, ne tombez surtout pas dans l&#8217;erreur de faire plusieurs &lt;h1&gt;, par exemple google, le prendra assez mal, et va croire que vous voulez spammer. Mettre plusieurs h1 était chose courante il y a quelques années, mais comme je vous l&#8217;ai expliqué plus haut, les algorithmes changent pour éviter les tricheurs, et les spammeurs. Faites 1 seul titre de type h1, et ensuite structurez le reste de vos titres avec des h2, h3 et h4.</li>
</ul>
<ul>
<li>Renseignez bien les balises &#8220;title&#8221; de vos liens et &#8220;alt&#8221; de vos images. Le faite d&#8217;avoir un site internet accessible pour les handicapés devient de plus en plus important pour le référencement. Mettez une description pertinante, courte, avec au moins un mot clef en rapport.</li>
</ul>
<ul>
<li>Ayez du contenu dans vos pages. 3 lignes de texte n&#8217;est pas suffisant, essayez de faire du vrai contenu. Votre page gagnera en contenu, et en desnsité, car le plus souvent, votre contenu va comporter quelques mots clefs sur lesquels vous vouliez sortir. Ne franchissez pas la frontière entre du contenu optimisé référencement (quelques mots clefs, un contenu pertinent pour le moteur de recherche et vos internautes, un texte informatif) et du contenu &#8220;sale&#8221; (suite de mots clefs, contenu comportant du spam).</li>
</ul>
<ul>
<li>Les balises <code>meta name="description"</code> et <code>meta name="keywords"</code> unique pour chaque page. Quand votre site est classé sur le moteur de recherche, le petit texte descriptif qu&#8217;on peut retrouver en dessous, est le texte de votre balise Desccription. L&#8217;oublie de ces métas n&#8217;est pas très handicapant, il y a quelques années, ces métas étaient très très important, maintenant, leur importance n&#8217;est plus aussi vrai, mais je vous conseille quand même de les mettre.</li>
</ul>
<ul>
<li>Eviter absoluement les &#8220;frameset&#8221; et autres &#8220;iframes&#8221;. Les moteurs de recherche ne les prendront pas en compte et cela vous pénalisera énormément si jamais cette nouvelle page avait du contenu. Prévilégié l&#8217;include de page en php.</li>
</ul>
<ul>
<li>Le temps d&#8217;affichage de votre page. Ne faites pas trop de graphisme lourd sur vos pages, essayez de faire un compromis entre le visuel et le temps de chargement.</li>
<li>Eviter les scripts &#8220;cgi&#8221; qui analyseraient si votre visiteur a flash, real time ou autre d&#8217;installés sur sa machine. Les robots auront du mal à aller plus loins sur votre site, et c&#8217;est pourtant un atout majeur.</li>
<li>Eviter le plus possible le flash. Le texte inscris dans vos animations ne seront pas pris en compte par les moteurs. Même si google a fait un partenariat avec adobe, il n&#8217;arrive pas encore à bien les prendre en compte. Si vous voulez faire un site full flash, faites aussi un accès vers une version &#8220;plus html&#8221;.</li>
<li>Eviter la balise meta refresh, qui est très souvent utilisée et considérée comme du spam. Les redirections ne sont pas très appréciées.</li>
<li>Eviter le spamdexing. Google ne vous loupera pas soyez en sûr. Mettre une suite de mots clefs en noir, sur fond noir&#8230; n&#8217;est pas une action a faire sur votre site, car votre site ira le plus souvent dans la sandbox (une sorte de blacklist, pour en sortir c&#8217;est quasi impossible). Pareil pour du texte caché par une image, la balise alt est là pour ça. Evidemment, j&#8217;ai testé la deuxième méthode, un de mes sites était monté très rapidement sur google, mais je l&#8217;ai enlevé juste à temps. Si vous faites une des 2 solutions, c&#8217;est à vos risques et périls, votre site ne sera surement plus sur les moteurs de recherche si vous vous faites prendre.</li>
<li>Faites le plus de pages possible. Si vous faites un site vitrine pour une entreprise, essayez de faire plus que 5  pages histoire d&#8217;être vraiment plus &#8220;lourd&#8221; aux yeux des moteurs de recherche. Essayez de faire un contenu qui change assez souvent si vous avez la possibilité de le faire.</li>
<li>Essayez de vous faire des backlinks par d&#8217;autres sites. N&#8217;essayez pas de faire monter votre site avec des sites satelites, cette pratique ne marche quasiement plus.</li>
</ul>
<p>Voici quelques règles de base pour référencer votre site internet. Il y a quelques astuces qu&#8217;on peut des fois expérimenter, mais le plus souvent, il n&#8217;y a pas de réel secret de magiciens, juste quelques bidouilles et une optimisation bien pensée. Avoir d&#8217;autres sites qui sont déjà bien référencés peut jouer pour faire monter le dernier.</p>
<p>Surtout, une des règles dans le référencement, c&#8217;est d&#8217;être patient. Le référencement est une partie de la conception du site qui n&#8217;est pas vraiment palpable, donc difficilement définissable sur la durée pour le client. Il faut souvent compter en mois avant d&#8217;avoir un bon positionnement sur les moteurs de recherche. Différents paramètres rentrent en compte sur la rapidité : taux de concurrence sur ce mots clef, densité de vos pages, backlinks obtenus, temps de réaction des moteurs de recherche ou des annuaires. Utilisez bien les outils décrits dans la catégorie référencement : <a title="référencement de site internet" href="http://astuces-webdesign.com/referencement">http://astuces-webdesign.com/referencement</a> . Vous pouvez également entreprendre une campagne adwords pour booster un peu plus votre positionnement, mais n&#8217;oubliez pas que ce sera surtout votre travail en amont qui sera décisif.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Fbases-du-referencement-430.html&amp;linkname=Bases%20du%20r%C3%A9f%C3%A9rencement" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/bases-du-referencement-430.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Coupon adwords à gagner</title>
		<link>http://www.astuces-webdesign.com/actualites/coupon-adwords-a-gagner-426.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/coupon-adwords-a-gagner-426.html#comments</comments>
		<pubDate>Mon, 06 Jul 2009 15:41:26 +0000</pubDate>
		<dc:creator>Jedfolio</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[adwords]]></category>

		<category><![CDATA[google]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=426</guid>
		<description><![CDATA[Google offre des coupons adwords d&#8217;une valeur de 50euros afin de tester les campagnes adwords. Ces campagnes permettent de faire de la pub vers son site internet quel qu&#8217;il soit selon différents mots clefs qui ont chacun une valeur.
Par exemple si vous achetez des mots très recherché (exemple : Lyon), le coût du clic va [...]]]></description>
			<content:encoded><![CDATA[<p>Google offre des coupons adwords d&#8217;une valeur de 50euros afin de tester les campagnes adwords. Ces campagnes permettent de faire de la pub vers son site internet quel qu&#8217;il soit selon différents mots clefs qui ont chacun une valeur.</p>
<p>Par exemple si vous achetez des mots très recherché (exemple : Lyon), le coût du clic va être plus élevé qu&#8217;un autre mot plus ciblé (exemple : camping vacances Lyon). La concurrence sur un mot clef, la pertinance de ce mot dans votre site peut faire varier le coût. Si votre site internet parle énormément sur le sujet du mot clef voulu, la pertinance pourra faire descendre un peu le prix du clic.</p>
<p>Pour vos campagnes adwords, vous ne payez qu&#8217;à la fin de votre durée, ou vous mettez une certaine somme d&#8217;argent. Je vous conseille la deuxième solution si vous êtes un particulier qui souhaite faire juste un peu de pub.</p>
<p>Astuces-webdesign.com vous offre 2 bons de campagnes adwords d&#8217;une valeur de 50 euros chacun. Pour gagner l&#8217;un de ces coupons les règles du jeu sont simple :</p>
<p>- vous devez poster un commentaire à cet article commençant par la phrase : &#8220;coupons adwords d&#8217;astuces-webdesign.com &#8230;&#8230;&#8230;&#8221;</p>
<p>- vous ne devez pas poster 2 commentaires de suite (un minimum de 3 commentaires entre les votres est requis)</p>
<p>- vous pouvez envoyer jusqu&#8217;à 3 commentaires au maximum</p>
<p>- le 25ième commentaire et le 50ième commentaire gagneront chacun un coupon</p>
<p>- faire un commentaire un minimum constructif</p>
<p>Le concours commence donc ce soir à 17h45, pour finir le mardi à 18h, vous devez vous inscrire pour poster un commentaire, et vous devrez avoir un mail valide pour pouvoir recevoir le bon adwords. Le site donnera 1 seul coupon par gagnant, si une personne gagne 2 coupons, le 2ème sera distribué au suivant (le 51ème commentaire). Vous avez donc un peu plus de 24h pour gagner, bonne chance <img src='http://www.astuces-webdesign.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Fcoupon-adwords-a-gagner-426.html&amp;linkname=Coupon%20adwords%20%C3%A0%20gagner" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/coupon-adwords-a-gagner-426.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières cours n°5</title>
		<link>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b05-422.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b05-422.html#comments</comments>
		<pubDate>Mon, 06 Jul 2009 14:23:57 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions]]></category>

		<category><![CDATA[galliot]]></category>

		<category><![CDATA[perl]]></category>

		<category><![CDATA[rationelles]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulières]]></category>

		<category><![CDATA[thomas]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=422</guid>
		<description><![CDATA[&#60;!&#8211; 		@page { margin: 2cm } 	&#8211;&#62;
Le point matche (presque) tous les caractères
Dans les expressions régulières, le point est l&#8217;un des métacaractères le plus utilisé. Malheureusement, c&#8217;est également l&#8217;un des caractères le plus souvent mal utilisé.
Le point matche un caractère unique, sans se soucier de quel caractère il s&#8217;agit. La seule exception sont les caractère [...]]]></description>
			<content:encoded><![CDATA[<p>&lt;!&#8211; 		@page { margin: 2cm } 	&#8211;&gt;</p>
<h2><span style="text-decoration: underline;">Le point matche (presque) tous les caractères</span></h2>
<p><span lang="zxx">Dans les expressions régulières, le point est l&#8217;un des métacaractères le plus utilisé.</span> <span lang="zxx">Malheureusement, c&#8217;est également l&#8217;un des caractères le plus souvent mal utilisé.</span></p>
<p><span lang="zxx">Le point matche un caractère unique, sans se soucier de quel caractère il s&#8217;agit.</span> <span lang="zxx">La seule exception sont les caractère de retour à la ligne.</span> <span lang="zxx">Dans tous les styles de regex discutés dans ce tutoriel, le point ne correspondra pas à une nouvelle ligne par défaut.</span> <span lang="zxx">Donc par défaut le point correspond à la classe de négation [^n] (style de regex UNIX) ou [^rn] (style de regex Windows).</span></p>
<p><span lang="zxx">Cette exception existe surtout pour des raisons historiques.</span> <span lang="zxx">Les premiers programmes à utiliser les expressions régulières fonctionnaient ligne par ligne.</span> <span lang="zxx">Ils lisaient un fichier ligne par ligne, et appliquaient l&#8217;expression régulière séparément pour chaque ligne.</span> <span lang="zxx">Le résultat est qu&#8217;avec ces programmes, la chaîne ne contenait jamais de retour à la ligne, donc le point ne pouvait pas les matcher.</span></p>
<p><span lang="zxx">Les programmes modernes et les langages peuvent appliquer des expressions régulières à de très grosses chaînes, voire à des fichiers entiers.</span> <span lang="zxx">Tous les styles de regex dont il est question ici ont une option pour faire matcher le point avec tous les caractères, y compris les retours à la ligne.</span> <span lang="zxx">Dans RegexBuddy, EditPad Pro ou PowerGREP, vous pouvez simplement cocher la case &#8220;Le point matche les retours à la ligne&#8221;.</span></p>
<p><span lang="zxx">En perl, le mode où le point matche aussi les nouvelles lignes est appelé &#8220;mode ligne simple&#8221;.</span> <span lang="zxx">C&#8217;est un peu dommage, car il est facile de mélanger ce terme avec &#8220;mode lignes multiples&#8221;.</span> <span lang="zxx">Le mode multilignes affecte seulement les ancres, alors que le mode ligne simple concerne le point.</span> <span lang="zxx">Vous pouvez activer le mode ligne simple en ajoutant u s après le code de regex, comme ceci : </span> <span lang="zxx">m/^regex$/s;.</span></p>
<p><span lang="zxx">D&#8217;autres langages et librairies de regex ont adopté la terminologie de Perl.</span> <span lang="zxx">Quand on utilise les classes regex du framework .NET, vous activez ce mode en spécifiant RegexOptions.Singleline, comme pour Regex.match(&#8221;chaîne&#8221;, &#8220;regex&#8221;, RegexOption.Singleline).</span></p>
<p><span lang="zxx">Dans tous les langages de programmation et toutes les librairies de regex que je connais, l&#8217;activation du mode ligne simple a pour seul effet de faire matcher les points et les nouvelles lignes.</span> <span lang="zxx">Donc si vous mentionnez cette option à vos utilisateurs, donnez-lui une appellation plus claire comme dans RegexBuddy, EditPad Pro et PowerGREP.</span></p>
<p><span lang="zxx">Javascript et VBScript n&#8217;ont pas d&#8217;option pour permettre au point de matcher les caractères de retour chariot.</span> <span lang="zxx">Dans ces langages, vous pouvez utiliser une classe de caractères comme [sS] pour matcher tout caractère.</span> <span lang="zxx">Cette expression matche un caractère qui est soit un espace blanc (y compris les caractères de retour à la ligne), ou un caractère qui n&#8217;est pas un espace blanc.</span> <span lang="zxx">Comme tous les caractères sont soit des espaces blancs soit un caractère autre, cette expression matche tout caractère.</span></p>
<h2><span style="text-decoration: underline;">Utilisez le point avec parcimonie</span></h2>
<p><span lang="zxx">Le point est un métacaractère très puissant.</span> <span lang="zxx">Il vous permet d&#8217;être paresseux.</span> <span lang="zxx">Mettez un point, pour que tout aille bien quand vous testerez le regex sur les données à exploiter.</span> <span lang="zxx">Le problème est que le regex va aussi matcher dans des cas où il ne devrait pas.</span> <span lang="zxx">Si vous êtes nouveau dans les expressions régulières, certains de ces cas ne seront pas évident pour commencer.</span></p>
<p><span lang="zxx">Je vous illustrerai cela par un exemple simple.</span> <span lang="zxx">Disons que l&#8217;on veuille matcher une date dans un format mm/dd/yy, mais que l&#8217;on veuille laisser à l&#8217;utilisateur le choix des séparateurs de date.</span> <span lang="zxx">La solution rapide serait dd.dd.dd.</span> <span lang="zxx">Cela semble bien.</span> <span lang="zxx">Il matchera une date comme 02/12/03.</span> <span lang="zxx">Le problme est : 02512703 est aussi considéré comme une date valable dans cette expression.</span><span lang="zxx">Dans ce matche, le premier point matche 5, et le second matche 7.</span> <span lang="zxx">Ce n&#8217;est visiblement pas ce que l&#8217;on attendait.</span></p>
<p><span lang="zxx">dd[-'/.]dd[-'/.]dd est une meilleure approche.</span> <span lang="zxx">Ce regex prend un tiret, un espace, le point ou le slash comme séparateurs de date.</span> <span lang="zxx">Souvenez-vous que le point n&#8217;est pas un métacaractère dans une classe de caractère, donc pas besoin de l&#8217;échapper.</span></p>
<p><span lang="zxx">Ce regex est encore loin de la perfection.</span> <span lang="zxx">Il prend 99/99/99 comme une date valide.</span> <span lang="zxx">[0-1]d[- /.][0-3]d[- /.]dd est une étape de plus, même s&#8217;il accepte 19/39/99.</span> <span lang="zxx">Le perfectionnement que vous voulez apporter à votre regex dépend de ce que vous voulez en faire.</span> <span lang="zxx">Si vous validez des données utilisateurs, il doit être parfait.</span> <span lang="zxx">Si vous récupérez des fichiers de données d&#8217;une source connue qui génère ses fichiers toujours de la même manière, notre dernier modèleest probablement plus que suffisant pour vérifier les données sans erreur.</span> <span lang="zxx">Vous pouvez trouver un meilleur regex pour matcher les dates dans la section des exemples.</span></p>
<h2><span style="text-decoration: underline;">Utiliser des caractères négationnés à la place du point.</span></h2>
<p><span lang="zxx">Je vous expliquerai tout cela plus en détails lorsque je vous présenterai les opérateurs de répétition avec le multiplicateur et le plus, mais l&#8217;avertissement a son utilité et mérite d&#8217;être mentionné ici.</span> <span lang="zxx">Je vais l&#8217;illustrer par un exemple.</span></p>
<p><span lang="zxx">Imaginez que vous vouliez matcher une chaîne entourée de guillemets.</span> <span lang="zxx">Cela semble facile.</span> <span lang="zxx">On peut avoir n&#8217;importe quel nombre de caractères entre les guillemets, donc &#8220;.*&#8221; semble être suffisant.</span> <span lang="zxx">Le point matche tout caractère, et le multilpier permet au point de se répéter un nombre donné de fois, y compris aucune.</span> <span lang="zxx">Si vous testez ce regex avec Mettez une &#8220;chaîne&#8221; entre guillemets, il matchera bien &#8220;chaîne&#8221;. Alors maintenant, testez ce regex sur </span><tt><span lang="zxx">Houston, nous avons un problème avec &#8220;chaîne un&#8221; et &#8220;chaîne deux&#8221;. Répondez s&#8217;il vous plaît.</span></tt></p>
<p><span lang="zxx">Ouch.</span> <span lang="zxx">Le regex matche </span><tt><span lang="zxx">&#8220;chaîne un&#8221; et &#8220;chaîne deux&#8221;</span></tt><span lang="zxx">.</span> <span lang="zxx">Ce n&#8217;est vraiment pas ce que l&#8217;on voulait.</span> <span lang="zxx">C&#8217;est parce que le multiplicateur est avide.</span></p>
<p><span lang="zxx">Dans l&#8217;exemple de match avec les dates, nous avons amélioré le regex avec une classe de caractères.</span> <span lang="zxx">Ici nous allons faire de même.</span> <span lang="zxx">Notre première définition d&#8217;une chaîne entre guillemets n&#8217;était pas la bonne.</span> <span lang="zxx">On ne veut pas n&#8217;importe quel nombre de n&#8217;importe quel caractère entre les guillemets.</span> <span lang="zxx">On veut n&#8217;importe quel nombre de caractères qui n&#8217;est pas un guillemet ou une nouvelle ligne entre les guillemets, donc le regex doit être &#8220;[^"rn]*&#8221;.</span></p>
<p style="margin-bottom: 0cm;">
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fexpressions-regulieres-cours-n%25c2%25b05-422.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B05" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/expressions-regulieres-cours-n%c2%b05-422.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Cour SQL:Création d&#8217;une table et contraintes d&#8217;intégrité.</title>
		<link>http://www.astuces-webdesign.com/mysql-programmation/cour-sqlcreation-dune-table-et-contraintes-dintegrite-416.html</link>
		<comments>http://www.astuces-webdesign.com/mysql-programmation/cour-sqlcreation-dune-table-et-contraintes-dintegrite-416.html#comments</comments>
		<pubDate>Mon, 06 Jul 2009 10:08:25 +0000</pubDate>
		<dc:creator>Jox-nathan</dc:creator>
		
		<category><![CDATA[Mysql]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=416</guid>
		<description><![CDATA[Création d&#8217;une table et contraintes d&#8217;intégrité.
L&#8217;ordre CREATE TABLE permet de créer une table en définissant le nom et le type (voir chapitre précédant ) de chacune des colonnes de la table. Nous ne verrons ici
que trois des types de données utilisés dans SQL : numérique, chaîne de caractères et date.
Il faut donc utiliser cette syntaxe:
CREATE [...]]]></description>
			<content:encoded><![CDATA[<h1>Création d&#8217;une table et contraintes d&#8217;intégrité.</h1>
<p>L&#8217;ordre <span style="color: #ff0000;">CREATE TABLE</span> permet de créer une table en définissant le nom et le type (voir chapitre précédant ) de chacune des colonnes de la table. Nous ne verrons ici<br />
que trois des types de données utilisés dans SQL : numérique, chaîne de caractères et date.</p>
<h3>Il faut donc utiliser cette syntaxe:</h3>
<p>CREATE TABLE NomTable (colonne1 type1, colonne2 type2, &#8230;&#8230;&#8230;, &#8230;&#8230;&#8230;).</p>
<p>NomTable est le nom que l&#8217;on donne à la table ( vous l&#8217;aurez compris ) .</p>
<p>colonne1, colonne2,.. sont les noms des colonnes.</p>
<p>type1, type2,.. sont les types des données qui seront contenues dans les colonnes.</p>
<p>On peut ajouter après la description d&#8217;une colonne l&#8217;option <span style="color: #ff0000;">NOT NULL</span> qui interdira que cette colonne contienne la valeur <span style="color: #ff0000;">NULL</span>. On peut aussi ajouter<br />
des contraintes d&#8217;intégrité portant sur une ou plusieurs colonnes de la table, mais n&#8217;allons pas trop vite, on verra sa a la suite de ce cour.</p>
<h2>Exemple:</h2>
<p>Voici un exemple de création de la table <strong>Article</strong>:</p>
<p><span style="color: #ff0000;">CREATE TABLE</span> <strong>Article </strong>(<br />
<strong>ref </strong>VARCHAR(10) constraint pk_article primary key,<br />
<strong>nom</strong> VARCHAR(30) NOT NULL,<br />
<strong>prix</strong> DECIMAL(9,2),<br />
<strong>datemaj</strong> DATE)</p>
<h4>Mais que veut dire &#8220;constraint pk_article primary key&#8221;?</h4>
<p>Alors cette petite phrase veut dire que l&#8217;on veut que la colonne <strong>ref</strong> soit la clef primaire de cette table.Tout simplement. Nous allons même voir cela dessuite.</p>
<h1>Contrainte d&#8217;intégrité:</h1>
<p><strong>Ce chapitre est un des plus long du cour et est assez important je vais donc essayer de faire au plus simple et d&#8217;aller droit au but!.</strong></p>
<p>Dans la définition d&#8217;une table, on peut indiquer des contraintes d&#8217;intégrité portant sur une ou plusieurs colonnes.</p>
<p>Les contraintes possibles sont :<br />
<span style="color: #ff0000;">PRIMARY KEY</span>, <span style="color: #ff0000;">UNIQUE</span>, <span style="color: #ff0000;">FOREIGN </span><span style="color: #ff0000;">KEY</span>&#8230;<span style="color: #ff0000;">REFERENCES</span>, <span style="color: #ff0000;">CHECK</span><br />
Toute dénition de table doit comporter au moins une contrainte de type<br />
<span style="color: #ff0000;">PRIMARY KEY.<span style="color: #000000;">(clef primaire pour ce qui n&#8217;aiment pas l&#8217;anglais)</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;">Chaque contrainte doit être nommée (ce qui permettra de la désigner par<br />
un ordre <span style="color: #ff0000;">ALTER TABLE</span> ( modifier une table):</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><br />
<span style="color: #ff0000;">( CONSTRAINT</span> nom-contrainte définition-contrainte )</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><br />
Le nom d&#8217;une contrainte doit être unique parmi toutes les contraintes de<br />
toutes les tables de la base de données.</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><br />
</span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;"><strong>Il existe des contraintes :</strong></span></span></h2>
<p><span style="color: #ff0000;"><span style="color: #000000;"><br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><strong>sur une colonne</strong> : la contrainte porte sur une seule colonne. Elle suit la</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">définition de la colonne dans un ordre<span style="color: #ff0000;"> CREATE TABLE</span> (pas possible<br />
dans un ordre <span style="color: #ff0000;">ALTER TABLE</span>).</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><strong>sur une table</strong> : la contrainte porte sur une ou plusieurs colonnes. Elles se</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">place au même niveau que les définition des colonnes dans un ordre<br />
<span style="color: #ff0000;">CREATE TABLE </span>ou <span style="color: #ff0000;">ALTER TABLE.</span></span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;">Types de contraintes:</span></span></span></span></h2>
<h3><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;">Contrainte de clé primaire:</span></span></span></span></h3>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une table :</span></span></span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">PRIMARY KEY</span> (colonne1, colonne2,&#8230;)</span></span></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;"><br />
</span></span></span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une colonne :</span></span></span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">PRIMARY KEY</span></span></span></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;"><span style="color: #000000;">Définit la <strong>clé primaire</strong> de la table. Aucune des colonnes qui forment cette clé<br />
ne doit avoir une valeur NULL.</span><br />
</span></span></span></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><strong>Contrainte d&#8217;unicité:</strong><br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une table :</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">UNIQUE</span> (colonne1, colonne2,&#8230;)<br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une colonne :</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">UNIQUE</span><br />
Interdit qu&#8217;une colonne (ou la concaténation de plusieurs colonnes) contienne<br />
<strong>deux valeurs identiques</strong>.</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><em><strong>Remarque:</strong></em></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><em><strong>Cette contrainte <span style="color: #ff0000;">UNIQUE </span>convient à des clés candidates. Cependant une colonne <span style="color: #ff0000;">UNIQUE</span> peut avoir des valeurs <span style="color: #ff0000;">NULL</span> et une contrainte<br />
<span style="color: #ff0000;">UNIQUE</span> ne correspond donc pas toujours à un identificateur.</strong></em></span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;">Contrainte de clé étrangère:</span></span></h2>
<h2></h2>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une table :</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">FOREIGN KEY</span> (colonne1, colonne2,&#8230;)<br />
<span style="color: #ff0000;">REFERENCES</span> <strong>tableref</strong> [(col1, col2,...)]</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;">Pour une contrainte sur une colonne :</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">REFERENCES tableref [(col1 )]</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;">Indique quel est la clé étrangère et a quelle clé primaire de quelle table elle correspond. ( <strong>tableref </strong>est le nom de la table qui contient la clé primaire correspondant a la clé étrangere).</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><strong><em><span style="text-decoration: underline;">Remarque:</span> L&#8217;option &#8220;<span style="color: #ff0000;">ON DELETE CASCADE</span>&#8221; ( qui doit se mettre a la fin de l&#8217;ordre)  indique que la suppression d&#8217;une<br />
ligne de tableref va entraîner automatiquement la suppression des lignes qui la référencent dans la table. Si cette option n&#8217;est pas indiquée, il est impossible<br />
de supprimer des lignes de tableref qui sont référencées par des lignes de la table.</em></strong></span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;">Facultatif:</span></span></h2>
<p><span style="color: #ff0000;"><span style="color: #000000;">La norme SQL2( Mysql) offre 4 autres options :</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">ON DELETE SET DEFAULT</span> met une valeur par défaut dans la clé</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">étrangère quand la clé primaire référencée est supprimée.<br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">ON UPDATE CASCADE</span> modie la clé étrangère si on modie la clé</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">primaire (ce qui est à éviter).<br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">ON UPDATE SET NULL </span>met <span style="color: #ff0000;">NULL </span>dans la clé étrangère quand la clé</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">primaire référencée est modiée.<br />
</span></span></p>
<ul>
<li><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">ON UPDATE SET DEFAULT</span> met une valeur par défaut dans la clé</span></span></li>
</ul>
<p><span style="color: #ff0000;"><span style="color: #000000;">étrangère quand la clé primaire référencée est modiée.</span></span></p>
<h3><span style="color: #ff0000;"><span style="color: #000000;">Pourquoi facultatif ?</span></span></h3>
<p><span style="color: #ff0000;"><span style="color: #000000;">Parce que a moins que vous soyez un fan des bases de données ou un proffessionnel utilisant beaucoup le SQL vous n&#8217;aurez pas besoins de ces options.</span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;">On passe aux exemples: </span></span></h2>
<p><span style="color: #ff0000;"><span style="color: #000000;">Quelques contraintes sur des colonnes :<br />
<strong><span style="color: #ff0000;">CREATE TABLE</span> EMP (<br />
MATR INTEGER CONSTRAINT KEMP PRIMARY KEY,<br />
NOME VARCHAR(10) CONSTRAINT NOM_UNIQUE UNIQUE<br />
CONSTRAINT MAJ CHECK (NOME = UPPER(NOME)),<br />
&#8230;&#8230;&#8230;<br />
DEPT INTEGER CONSTRAINT R_DEPT REFERENCES DEPT(DEPT)<br />
CONSTRAINT NDEPT CHECK (DEPT IN (10, 20, 30, 35, 40)))</strong></span></span></p>
<h2><span style="color: #ff0000;"><span style="color: #000000;"><strong>Ajouter, supprimer ou renommer une contrainte:</strong></span></span></h2>
<p><span style="color: #ff0000;"><span style="color: #000000;">Des contraintes d&#8217;intégrité peuvent être ajoutées ou supprimées par la<br />
commande <strong>ALTER TABLE</strong>.  On ne peut ajouter que des contraintes de table.</span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><strong><em>Exemple:</em></strong></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><span style="color: #ff0000;">ALTER TABLE</span> <strong>EMP<br />
</strong><span style="color: #ff0000;">DROP</span> <strong>CONSTRAINT NOM_UNIQUE (supprimmer)<br />
</strong><span style="color: #ff0000;">ADD</span><strong> CONSTRAINT SAL_MIN CHECK(SAL + NVL(COMM,0) &gt; 1000) (modifier)<br />
</strong><span style="color: #ff0000;">RENAME</span> <strong>CONSTRAINT NOM1 TO NOM2 ( renommer)</strong></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><strong><br />
</strong></span></span></p>
<p><span style="color: #ff0000;"><span style="color: #000000;"><strong><br />
</strong></span></span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fmysql-programmation%2Fcour-sqlcreation-dune-table-et-contraintes-dintegrite-416.html&amp;linkname=Cour%20SQL%3ACr%C3%A9ation%20d%26%238217%3Bune%20table%20et%20contraintes%20d%26%238217%3Bint%C3%A9grit%C3%A9." target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/mysql-programmation/cour-sqlcreation-dune-table-et-contraintes-dintegrite-416.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Cour SQL:Types de données</title>
		<link>http://www.astuces-webdesign.com/actualites/cour-sqltypes-de-donnees-414.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/cour-sqltypes-de-donnees-414.html#comments</comments>
		<pubDate>Mon, 06 Jul 2009 10:07:21 +0000</pubDate>
		<dc:creator>Jox-nathan</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[Mysql]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=414</guid>
		<description><![CDATA[Types de données.
Vous l&#8217;aurez compris dans cette partie du cours nous allons parler des différent types de données ( sans blagues ).
Mais a quoi cela va nous servir?
Bonne question! Et bien les types de données il faut les connaitre car sans sa on ne peut pas créer une base de donnée digne de ce nom.
Types [...]]]></description>
			<content:encoded><![CDATA[<h1>Types de données.</h1>
<p>Vous l&#8217;aurez compris dans cette partie du cours nous allons parler des différent types de données ( sans blagues ).</p>
<h2>Mais a quoi cela va nous servir?</h2>
<p>Bonne question! Et bien les types de données il faut les connaitre car sans sa on ne peut pas créer une base de donnée digne de ce nom.</p>
<h2>Types numériques: ( les plus courants)</h2>
<h3>Les types numériques de la norme SQL sont :</h3>
<ul>
<li>Les Nombres entiers : <span style="color: #ff0000;">SMALLINT</span> (sur 2 octets, de -32.768 à 32.767), INTEGER</li>
</ul>
<p>(sur 4 octets, de -2.147.483.648 à 2.147.483.647).</p>
<ul>
<li> Nombres décimaux avec un nombre x de décimales : <span style="color: #ff0000;">NUMERIC</span>,</li>
</ul>
<p><span style="color: #ff0000;">DECIMAL</span> (la norme impose à NUMERIC d&#8217;être implanté avec exactement<br />
le nombre de décimales indiqué alors que l&#8217;implantation de DECIMAL<br />
peut avoir plus de décimales).</p>
<h2>Types chaîne de caractères:</h2>
<h3>Types chaîne de caractères de SQL:</h3>
<p>Les constantes chaînes de caractères sont entourées par des apostrophes(&#8217;). Si la chaîne contient une apostrophe, celle-ci doit être doublée.</p>
<p>Exemple :&#8217;aujourd&#8221;hui&#8217;.<br />
Il existe deux types pour les colonnes qui contiennent des chaînes de<br />
caractères :<br />
Le type <span style="color: #ff0000;">CHAR</span> pour les colonnes qui contiennent des chaînes de longueur constante. La déclaration de type chaîne de caractères de longueur constante a le<br />
format suivant :<br />
CHAR(longueur )<br />
où longueur est la longueur maximale (en nombre de caractères) qu&#8217;il<br />
sera possible de stocker dans le champ ; par défaut, longueur est égale<br />
à 1.</p>
<p>L&#8217;insertion d&#8217;une chaîne dont la longueur est supérieure à longueur<br />
sera refusée. Une chaîne plus courte que longueur sera complétée par<br />
des espaces (important pour les comparaisons de chaînes). Tous les<br />
SGBD imposent une valeur maximum pour longueur (255 pour Oracle).<br />
Le type <span style="color: #ff0000;">VARCHAR</span> pour les colonnes qui contiennent des chaînes de longueurs<br />
variables.<br />
On déclare ces colonnes par :<br />
VARCHAR(longueur )<br />
longueur indique la longueur maximale des chaînes contenues dans la<br />
colonne. Tous les SGBD imposent une valeur maximum pour longueur<br />
(plusieurs milliers de caractères).</p>
<h2>Types temporels:</h2>
<h3>Types temporels SQL:</h3>
<ul>
<li><span style="color: #ff0000;">DATE</span> :réserve 2 chiffres pour le mois et le jour et 4 pour l&#8217;année ;</li>
</ul>
<ul>
<li><span style="color: #ff0000;">TIME :</span>pour les heures, minutes et secondes (les secondes peuvent comporter</li>
</ul>
<p>un certain nombre de décimales) ;</p>
<ul>
<li><span style="color: #ff0000;">TIMESTAMP </span>:permet d&#8217;indiquer un moment précis par une date avec</li>
</ul>
<p>heures, minutes et secondes (6 chiffres après la virgule ; c&#8217;est-à-dire<br />
en microsecondes) ;</p>
<ul>
<li><span style="color: #ff0000;">INTERVAL </span>:permet d&#8217;indiquer un intervalle de temps.</li>
</ul>
<h2>Valeur NULL:</h2>
<p>Une colonne qui n&#8217;est pas renseignée, et donc vide, est dite contenir la<br />
valeur &#8220;<span style="color: #ff0000;">NULL</span>&#8220;. Cette valeur n&#8217;est pas zéro, c&#8217;est une absence de valeur.</p>
<h3>Voici pour les types de données, dans le cour suivant nous verrons comment créer une table.</h3>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Fcour-sqltypes-de-donnees-414.html&amp;linkname=Cour%20SQL%3ATypes%20de%20donn%C3%A9es" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/cour-sqltypes-de-donnees-414.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières cours n°4</title>
		<link>http://www.astuces-webdesign.com/programmation/409-409.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/409-409.html#comments</comments>
		<pubDate>Sun, 05 Jul 2009 10:58:42 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions régulières]]></category>

		<category><![CDATA[perl]]></category>

		<category><![CDATA[regex]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=409</guid>
		<description><![CDATA[Classes ou jeux de caractères
Avec une &#8220;classe de caractères&#8221; aussi appelée &#8220;jeu de caractères&#8221;, vous pouvez demander au moteur de regex de trouver un caractère parmi plusieurs. Placez simplement les caractères que vous voulez  trouver entre crochets. Si vous voulez  trouver un a ou un e, tapez [ae]. Vous pouvez  par exemple [...]]]></description>
			<content:encoded><![CDATA[<h2><span style="text-decoration: underline;">Classes ou jeux de caractères</span></h2>
<p><span lang="zxx">Avec une &#8220;classe de caractères&#8221; aussi appelée &#8220;jeu de caractères&#8221;, vous pouvez demander au moteur de regex de trouver un caractère parmi plusieurs.</span> <span lang="zxx">Placez simplement les caractères que vous voulez  trouver entre crochets.</span> <span lang="zxx">Si vous voulez  trouver un a ou un e, tapez <span class="style1">[ae]</span>.</span> <span lang="zxx">Vous pouvez  par exemple écrire <span class="style1">l[ai]s</span> pour trouver <span class="style3">las</span> ou <span class="style3">lis</span>.</span> <span lang="zxx">C&#8217;est  très pratique si vous cherchez plusieurs mots proches.</span></p>
<p><span lang="zxx">Une classe de caractères ne trouve qu&#8217;un seul  caractère.</span> <span lang="zxx"><span class="style1">l[ai]s</span> ne correspond pas à <span class="style2">laas</span> <span class="style2">lais</span> ou autres.</span> <span lang="zxx">L&#8217;ordre des caractères dans  une classe n&#8217;est pas important.</span> <span lang="zxx">Les résultats  sont identiques.</span></p>
<p><span lang="zxx">Vous pouvez utiliser un tiret dans une classe  pour indiquer un groupe de caractères.</span> <span lang="zxx"><span class="style1">[0-9]</span> correspond à un seul chiffre entre 0 et 9.</span> <span lang="zxx">Vous  pouvez définir plus d&#8217;un groupe.</span> <span lang="zxx"><span class="style1">[0-9a-fA-F]</span> correspond à un seul chiffre hexadécimal, insensible à la casse.</span> <span lang="zxx">Vous pouvez combiner des groupes et des caractères  simples.</span> <span lang="zxx"><span class="style1">[0-9a-fxA-FX]</span> correspond à un  chiffre hexadécimal ou à la lettre X.</span> <span lang="zxx">Encore  une fois, l&#8217;ordre des caractères et des groupes n&#8217;est pas important.</span></p>
<p lang="zxx">Applications utiles</p>
<p lang="zxx">Trouver un mot, même s&#8217;il est mal orthographié, comme  <span class="style1">s[ée]par[ée]</span> ou <span class="style1">li[cs]en[cs]e</span>.</p>
<p lang="zxx">Trouver un identifiant dans un langage de programmation  avec<span class="style1"> [A-Za-z_][A-Za-z_0-9]*</span>,</p>
<p lang="zxx">Trouver un nombre hexadécimal en C avec<span class="style1"> 0[xX][A-Fa-f0-9]+</span>.</p>
<h2><span style="text-decoration: underline;">Négation du groupe de caractères</span></h2>
<p><span lang="zxx">Entrer un carré après le crochet d&#8217;ouverture  donnera la négation du groupe de caractères.</span> <span lang="zxx">Entrer  un carré après le crochet d&#8217;ouverture donnera la négation du  groupe de caractères.</span> <span lang="zxx">Contrairement au point, les caractères auxquels on applique la négation correspondent également aux caractères (invisibles) de saut de ligne.</span></p>
<p><span lang="zxx">Il </span><span lang="zxx">est important de retenir qu&#8217;un groupe de caractères auxquels on applique la négation doit tout de même correspondre à un caractère.</span> <span lang="zxx"><span class="style1">q[^u]</span> ne signifie pas :</span> <span lang="zxx">&#8220;un q suivi d&#8217;un u&#8221;.</span> <span lang="zxx">Cela signifie : </span> <span lang="zxx">&#8220;un q  suivi d&#8217;un caractère qui n&#8217;est pas un u&#8221;.</span> <span lang="zxx">Il  ne correspond pas au q dans la chaîne <span class="style2">Iraq</span>.</span> <span lang="zxx">Il  correspond au q et espace après le q de <span class="style2">Iraq est un pays</span>.</span> <span lang="zxx">De  fait, </span> <span lang="zxx">L&#8217;espace fera partie de la correspondance, parce qu&#8217;il est le &#8220;caractère qui n&#8217;est pas un u&#8221; auquel correspond le caractère auquel on applique la négation dans le regex ci-dessus.</span> <span lang="zxx">Si vous voulez que le regex trouve le q et seulement le q dans les deux chaînes, vous aurez besoin d&#8217;appliquer une négation du prochain caractère : </span> <span lang="zxx"><span class="style1">q(?!u)</span>.</span><span lang="zxx">Mais  nous y viendrons plus tard.</span></p>
<h2><span style="text-decoration: underline;">Métacaractères dans une classe de caractères.</span></h2>
<p><span lang="zxx">Rappelez-vous que les seuls caractères spéciaux ou métacaractères dans une classe de caractères sont le crochet fermé (]), l&#8217;antislash (\), le puissance (^) et le tiret (-).</span> <span lang="zxx">Les métacaractères usuels sont des caractères normaux dans un groupe de caractère, et n&#8217;ont pas besoin d&#8217;être échappés par un antislash.</span> <span lang="zxx">Pour chercher un  caractère ou plus, utilisez <span class="style1">[+*]</span>.</span> <span lang="zxx">Votre regex fonctionnera bien si vous échappez les métacaractères réguliers dans un groupe de caractères, mais cela réduit la lisibilité.</span></p>
<p><span lang="zxx">Pour ajouter un antislash en tant que caractère sans signification dans un groupe de caractères, vous devez l&#8217;échapper avec un autre antislash.</span> <span class="style1" lang="zxx">[\\x]</span><span lang="zxx"> correspond à un antislash ou un x.</span> <span lang="zxx">Le crochet fermant (]), le puissance (^) et le tiret (-) peuvent être inclus en les échappant avec un backslash, ou en les placant à une position où ils n&#8217;ont pas leur signification particulière.</span> <span lang="zxx">Je recommande la seconde méthode, pour des raisons  de lisibilité.</span> <span lang="zxx">Pour inclure un puissance,  ajoutez-le n&#8217;importe où sauf après un crochet ouvrant.</span> <span lang="zxx"><span class="style1">[x^]</span> correspond à un x ou un puissance.</span> <span lang="zxx">Vous  pouvez placer le crochet fermant juste après le crochet ouvrant, ou  bien le puissance pour une négation.</span> <span lang="zxx"><span class="style1">[]x] </span>correspond à un crochet fermant ou un x.</span> <span lang="zxx"><span class="style1">[^]x]</span> correspond à tout caractère n&#8217;étant pas un crochet fermant ou un  x.</span> <span lang="zxx">Le tiret peut êtr placé juste après le crochet ouvrant, ou juste avant le crochet fermant, ou juste après le caractère puissance (négation).</span> <span lang="zxx"><span class="style1">[-x]</span> et  <span class="style1">[x-]</span> correspondent tous deux à un x ou un tiret.</span></p>
<p><span lang="zxx">Vous pouvez utiliser tous les caractères non-imprimables dans les classes de caractères de la même manière qu&#8217;à l&#8217;extérieur des classes.</span> <span lang="zxx">Par ex.  <span class="style1">[$\u20AC]</span> correspond au symbole dollard ou euro, assumant que votre  style de regex supporte l&#8217;Unicode.</span></p>
<p><span lang="zxx">Le moteur Jgsoft, Perl et PCRE supportent aussi la séquence \Q &#8230; \E dans une classe de caractères pour échapper une chaîne de caractères.</span> <span lang="zxx">Par ex.<span class="style1"> [\Q[-]\E]</span> correspond à <span class="style3">[, - ou ]</span>,</span></p>
<p><span lang="zxx">Les expressions régulières en POSIX traitent  l&#8217;antislash comme un caractère littéral à l&#8217;intérieur des  classes.</span> <span lang="zxx">Cela signifie que vous ne pouvez pas utiliser l&#8217;antislash pour échapper le crochet fermant (]), le puissance (^) et le tiret (-).</span> <span lang="zxx">Pour utiliser  ces caractères, utilisez-les comme indiqué dans la section  ci-dessus.</span> <span lang="zxx">Cela signifie également que les éléments spéciaux comme les raccourcis ne sont pas disponible dans les expressions régulières POSIX.</span> <span lang="zxx">Voir le  tutorial sur les expressions entre crochet de POSIX pour plus  d&#8217;information.</span></p>
<h2><span style="text-decoration: underline;">Raccourcis dans les classes de caractères</span></h2>
<p><span lang="zxx">Comme certaines classes de caractères sont souvent utilisées, plusieurs raccourcis sont disponibles pour les classes de caractères.</span> <span lang="zxx"><span class="style1">\d</span> vaut <span class="style1">[0-9]</span>.</span></p>
<p><span lang="zxx"><span class="style1">\w</span> vaut &#8220;caractère alphanumérique&#8221;,  habituellement<span class="style1"> [A-Za-z0-9_]</span>.</span> <span lang="zxx">Notez l&#8217;ajout du  underscore et des chiffres.</span></p>
<p><span lang="zxx"><span class="style1">\s</span> correspond à &#8220;espace vide&#8221;.</span> <span lang="zxx">De nouveau, le caractère inclus dépend du style de  regex.</span> <span lang="zxx">Pour tous les styles inclus dans ce  tutorial, cela inclut <span class="style1">[ \t\r\n]</span>.</span> <span lang="zxx">C&#8217;est-à-dire  : </span> <span lang="zxx"><span class="style1">\s</span> correspond à un espace, une tabulation  ou un saut de ligne.</span> <span lang="zxx">Certains styles incluent également des caractères rares et non imprimables comme la tabulation verticale et l&#8217;avancement papier.</span></p>
<p><img src="http://www.regular-expressions.info/screens/rxbcharclass.png" border="0" alt="Characters matched by \w in RegexBuddy" width="657" height="550" align="bottom" /></p>
<p><span lang="zxx">Les raccourcis de classes de caractères peuvent  être utilisés dans et en dehors des crochets carrés.</span> <span lang="zxx"><span class="style1">\s\d</span> correspond à un caractère d&#8217;espacement suivi par un chiffre.</span> <span lang="zxx"><span class="style1">[\s\d]</span> correspond à un caractère simple qui est  soit un espacement soit un chiffre.</span> <span lang="zxx">Appliqué  à <span class="style2">1 + 2 = 3</span>, le premier regex matchera &#8220;<span class="style3"> 2</span>&#8221; (espace deux),  alors que le second matchera <span class="style3">1</span>.</span> <span lang="zxx"><span class="style1">[\da-fA-F]</span> correspond à un chiffre hexadécimal, et il est équivalent à  <span class="style1">[0-9a-fA-F]</span>.</span></p>
<p lang="zxx">Négation des raccourcis dans les classes de caractères</p>
<p><span lang="zxx">Les raccourcis présentés ci-dessus ont aussi  des négations.</span> <span lang="zxx"><span class="style1">\D</span> est identique à<span class="style1"> [^\d]</span>, <span class="style1">\W</span> est identique à <span class="style1">[^\w]</span> et <span class="style1">\S</span> est équivalent à<span class="style1"> [^\s]</span>.</span></p>
<p><span lang="zxx">Faites attention lorsque vous utilisez des  négations de raccourcis dans les crochets.</span> <span class="style1" lang="zxx">[\D\S]</span><span lang="zxx"> n&#8217;est pas équivalent à <span class="style1">[^\d\s]</span>.</span> <span lang="zxx">Celui-ci  matchera tout caractère qui n&#8217;est pas un chiffre ou un espacement.</span> <span lang="zxx">Il matchera donc x, mais pas 8.</span> <span class="style1" lang="zxx">[\D\S]</span><span lang="zxx">,  quand à lui, matchera tout caractère qui n&#8217;est pas soit un chiffre  soit un espacement.</span> <span lang="zxx">Comme un chiffre n&#8217;est pas un espacement, et un espacement n&#8217;est pas un chiffre, il matchera alors n&#8217;importe quel caractère, chiffre, espace ou autre.</span></p>
<h2><span style="text-decoration: underline;">Classes de caractères répétés</span></h2>
<p><span lang="zxx">Si vous répétez une classe de caractère en  utilisant un opérateur<span class="style1"> ?</span>, <span class="style1">*</span>, ou<span class="style1"> +</span>, vous allez répéter non  seulement le caractère pour lequel vous avez un match, mais aussi  toute la classe de caractères.</span> <span lang="zxx">Le regex  <span class="style1">[0-9]+</span> matche <span class="style3">837</span> mais aussi <span class="style3">222</span>.</span></p>
<p><span lang="zxx">Si vous voulez une répétition du caractère  matché, au lieu de la classe, vous allez devoir utiliser des  références arrières.</span> <span lang="zxx"><span class="style1">([0-9])\1+</span> matchera  <span class="style3">222</span> mais pas <span class="style2">837</span>.</span> <span lang="zxx">Lorsqu&#8217;elle sera appliquée  à la chaîne <span class="style2">833337</span>, elle matchera <span class="style3">3333</span> au milieu de la chaîne.</span> <span lang="zxx">Si ce n&#8217;est pas ce que vous souhaitez, vous aurez  besoin d&#8217;un lookahead et d&#8217;un lookbehind.</span></p>
<p><span lang="zxx">Mais je disgresse.</span> <span lang="zxx">Je ne  vous ai pas encore expliqué le fonctionnement des classes de  caractères à l&#8217;intérieur du moteur regex.</span> <span lang="zxx">Jetons  à présent un regard là-dessus</span></p>
<h2><span style="text-decoration: underline;">Un regard sur le moteur de regex</span></h2>
<p><span lang="zxx">Comme je l&#8217;ai déjà mentionné : </span> <span lang="zxx">l&#8217;ordre  des caractères dans une classe n&#8217;est pas important.</span><span lang="zxx"> <span class="style1">l[ai]s</span> matchera <span class="style3">lis</span> dans<span class="style2"> Je lis mais je suis las.</span>, parce que c&#8217;est le matche  le plus à gauche.</span> <span lang="zxx">Nous avons déjà vu  comment le moteur traite un regex constitué uniquement de caractères  littéraux.</span> <span lang="zxx">Ci-dessous, je vais vous montrer  comment il s&#8217;applique à une regex qui a plus de une permutation.</span> <span lang="zxx">C&#8217;est-à-dire : <span class="style1">l[ai]s</span> peut matcher <span class="style3">lis</span> et <span class="style3">las</span>.</span></p>
<p><span lang="zxx">Rien de particulier lors de la lecture des trois  premiers caractères de la chaîne.</span> <span lang="zxx">Le moteur  ne trouvera pas de <span class="style1">l</span> lors de chaque étape, et il continue alors avec  le caractère suivant dans la chaîne.</span> <span lang="zxx">Lorsque  le moteur arrive au 4ème caractère, il trouve un <span class="style3">l</span>.</span> <span lang="zxx">Le  moteur va alors tenter de matcher le reste du regex avec letexte.</span> <span lang="zxx">The next token in the regex is the literal <span class="style1">r</span>, which  matches the next character in the text.</span> <span lang="zxx">Le  second caractère, <span class="style1">[ai]</span> est accolé au caractère suivant dans le  texte (<span class="style2">i</span>).</span> <span lang="zxx">La classe de caractère donne deux  options au moteur : matcher <span class="style1">a</span> ou matcher<span class="style1"> i</span>.</span><span lang="zxx">Il  va d&#8217;abord tenter de matcher <span class="style1">a</span>, et échouer.</span></p>
<p><span lang="zxx">Mais comme on utilise un moteur orienté regex, il va continuer à essayer chacune des autres permutations du modèle de regex avant de conclure s&#8217;il peut être matché avec le texte commençant au 4ème caractère.</span> <span lang="zxx">Il continue  donc avec le deuxième choix et trouve que<span class="style1"> i</span> correspond à<span class="style3"> i</span>.</span> <span lang="zxx">Le dernier élément de regex est <span class="style1">s</span>, qui matche  également le caractère suivant.</span> <span lang="zxx">Le moteur a  trouvé un matche positif dans le texte à partir du 4ème caractère.</span> <span lang="zxx">Il retournera <span class="style3">lis</span> comme résultat du match, et ne  cherchera pas plus loin.</span> <span lang="zxx">Encore une fois, le  match le plus à gauche sera retourné, même si on a mis le <span class="style1">a</span> en  premier dans la classe de caractères, et que <span class="style3">las</span> aurait pu être  matché dans la chaîne.</span> <span lang="zxx">Mais le moteur n&#8217;est  pas allé aussi loin, parce qu&#8217;un autre match également valable a  été trouvé à sa gauche.</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2F409-409.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B04" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/409-409.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Une Bannière en Flash spécial « Joomla »</title>
		<link>http://www.astuces-webdesign.com/actualites/une-banniere-en-flash-special-%c2%ab-joomla-%c2%bb-408.html</link>
		<comments>http://www.astuces-webdesign.com/actualites/une-banniere-en-flash-special-%c2%ab-joomla-%c2%bb-408.html#comments</comments>
		<pubDate>Fri, 03 Jul 2009 09:56:51 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Actualités]]></category>

		<category><![CDATA[bannière flash joomla]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/actualites/une-banniere-en-flash-special-%c2%ab-joomla-%c2%bb-408.html</guid>
		<description><![CDATA[Bonjour à tous, avant de démarrer une longue série de tutos sur le Flash , voici pour commencer une petite astuce sympa, pour tous les fervents utilisateurs de JOOMLA
On a souvent l’impression qu’avec Joomla, les bannières sont obligatoirement statiques, et bien avec un peu de code bien placé, on peux facilement intégrer une bannière animée [...]]]></description>
			<content:encoded><![CDATA[<p>Bonjour à tous, avant de démarrer une longue série de tutos sur le Flash , voici pour commencer une petite astuce sympa, pour tous les fervents utilisateurs de JOOMLA</p>
<p>On a souvent l’impression qu’avec Joomla, les bannières sont obligatoirement statiques, et bien avec un peu de code bien placé, on peux facilement intégrer une bannière animée sur son site. </p>
<p>Première étape de réalisation :</p>
<p>Une fois que vous avez créé votre logo Flash que vous l&#8217;avez nommez (logo.swf. )<br />
Uploadez le sur votre FTP dans le dossier image de votre template de base. </p>
<p>Dans le fichier index.php de votre template, placez ce morceau de code à l&#8217;endroit ou vous souhaiteriez que votre logo apparaisse.</p>
<div>
<p>Image ou texte alternatif</p>
</div>
<p>Si l&#8217;on veut que l&#8217; animation tourne en boucle, il faudra remplacer les termes  « false » par « true »</p>
<p>ainsi que le “false” de loops par “true”</p>
<p>width=&#8221;635&#8243; height=&#8221;150&#8243; loops=&#8221;false&#8221; quality=&#8221;high&#8221;</p>
<p>Et bingo vous voilà,  le concepteur de votre propre bannière qui tourne en boucle sur votre site.</p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Factualites%2Fune-banniere-en-flash-special-%25c2%25ab-joomla-%25c2%25bb-408.html&amp;linkname=Une%20Banni%C3%A8re%20en%20Flash%20sp%C3%A9cial%20%C2%AB%20Joomla%20%C2%BB" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/actualites/une-banniere-en-flash-special-%c2%ab-joomla-%c2%bb-408.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Menu déroulant en JavaScript</title>
		<link>http://www.astuces-webdesign.com/xhtml-html-css/menu-deroulant-en-javascript-398.html</link>
		<comments>http://www.astuces-webdesign.com/xhtml-html-css/menu-deroulant-en-javascript-398.html#comments</comments>
		<pubDate>Fri, 03 Jul 2009 09:38:22 +0000</pubDate>
		<dc:creator>steber</dc:creator>
		
		<category><![CDATA[Autres tutoriels]]></category>

		<category><![CDATA[Xhtml - html - css]]></category>

		<category><![CDATA[astuces]]></category>

		<category><![CDATA[javascript]]></category>

		<category><![CDATA[tutoriel]]></category>

		<category><![CDATA[Xhtml et Css]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=398</guid>
		<description><![CDATA[

Menu déroulant en JavaScript
 
Ce tutoriel vous guidera pas à pas pour la réalisation d’un menu déroulant avec une pincée de JavaScript. Ce menu sera compatible avec les versions 6, 7 et 8 d’Internet Explorer et avec les versions 2 et 3 de Mozilla Firefox. Il sera aussi valide xHTML strict.
Les pré-requis : 
· Connaître les [...]]]></description>
			<content:encoded><![CDATA[<p><!--[if gte mso 10]><br />
<mce:style><!   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Tableau Normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-priority:99; 	mso-style-qformat:yes; 	mso-style-parent:""; 	mso-padding-alt:0cm 5.4pt 0cm 5.4pt; 	mso-para-margin-top:0cm; 	mso-para-margin-right:0cm; 	mso-para-margin-bottom:10.0pt; 	mso-para-margin-left:0cm; 	line-height:115%; 	mso-pagination:widow-orphan; 	font-size:11.0pt; 	font-family:"Calibri","sans-serif"; 	mso-ascii-font-family:Calibri; 	mso-ascii-theme-font:minor-latin; 	mso-hansi-font-family:Calibri; 	mso-hansi-theme-font:minor-latin; 	mso-fareast-language:EN-US;} --></p>
<p><!--[endif]--></p>
<p class="MsoNormal" style="text-align: center;" align="center"><span style="font-size: 17pt; line-height: 115%;">Menu déroulant en JavaScript</span></p>
<p class="MsoNormal" style="text-align: center;" align="center"><span style="font-size: 17pt; line-height: 115%;"> </span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Ce tutoriel vous guidera pas à pas pour la réalisation d’un menu déroulant avec une pincée de JavaScript. Ce menu sera compatible avec les versions 6, 7 et 8 d’Internet Explorer et avec les versions 2 et 3 de Mozilla Firefox. Il sera aussi valide xHTML strict.</span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="text-decoration: underline;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Les pré-requis :</span></span><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span></p>
<p class="MsoListParagraph" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Connaître les bases du HTML et du CSS</span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span></p>
<p class="MsoNormal" style="text-align: justify;"><strong><span style="font-size: 13pt; line-height: 115%; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #1f497d;">Étape 1 : Le HTML</span></strong></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">La première partie, est, vous vous en doutez sûrement, le HTML. Le principe est l’imbriquation de listes à puces.</span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Prenons pour exemple un menu avec les parties suivantes :</span></p>
<p class="MsoListParagraphCxSpFirst" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Accueil ;</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Actualités ;</span></p>
<p class="MsoListParagraphCxSpMiddle" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Cours ;</span></p>
<p class="MsoListParagraphCxSpLast" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Téléchargements.</span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></p>
<p class="MsoNormal" style="text-align: justify;"><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Nous allons commencer par créer ces parties là.</span></p>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;ul id=</span>"sidebar"<span style="color: black;">&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"index.php"&gt;<span style="color: black;">Acceuil&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"news.php"&gt;<span style="color: black;">Actualités&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"#"&gt;<span style="color: black;">Cours&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"downloads.php"&gt;<span style="color: black;">Téléchargements&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;/ul&gt;</span></pre>
</div>
<pre><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="text-decoration: underline;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">Rappel :</span></span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;"> Pour que le menu fonctionne, il est nécessaire de transformer les <em>&lt;li&gt;</em> en liens. Nous verrons pourquoi après. Quand vous mettez le diez (#) à la place de l’URL d’une page, le lien ne renvoit à rien.</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Maintenant, il faut imaginer que dans ces parties, il y aura d’autres parties, donc d’autres listes à puces.</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;ul id=</span>"sidebar"<span style="color: black;">&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"index.php"&gt;<span style="color: black;">Acceuil&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"news.php"&gt;<span style="color: black;">Actualités&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"#"&gt;<span style="color: black;">Cours&lt;/a&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>      </span>&lt;li&gt;&lt;a href=</span>"cours.php"&gt;<span style="color: black;">Cours complet&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="PT-BR"><span>      </span>&lt;li&gt;&lt;a href=</span><span lang="PT-BR">"astuces.php"&gt;<span style="color: black;">Astuces&lt;/a&gt;&lt;/li&gt;</span></span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="PT-BR"><span>   </span>&lt;/ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="PT-BR"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="PT-BR"><span>   </span></span><span style="color: black;">&lt;li&gt;&lt;a href=</span>"downloads.php"&gt;<span style="color: black;">Téléchargements&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;/ul&gt;</span></pre>
</div>
<pre><span style="color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Vous pouvez rajouter autant de sous-catégories que vous voudrez !</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;ul id=</span>"sidebar"<span style="color: black;">&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"index.php"&gt;<span style="color: black;">Acceuil&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"news.php"&gt;<span style="color: black;">Actualités&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"#"&gt;<span style="color: black;">Cours&lt;/a&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>      </span>&lt;li&gt;&lt;a href=</span>"cours.php"&gt;<span style="color: black;">Cours complet&lt;/a&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>         </span>&lt;ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>            </span>&lt;li&gt;&lt;a href=</span>"cours_php.php"&gt;<span style="color: black;">PHP/MySQL&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>      </span><span>      </span>&lt;li&gt;&lt;a href=</span>"cours_css.php"&gt;<span style="color: black;">CSS&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>            </span>&lt;li&gt;&lt;a href=</span>"cours_html.php"&gt;<span style="color: black;">(x)HTML&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>            </span>&lt;li&gt;&lt;a href=</span><span lang="EN-US">"cours_hardware.php"&gt;<span style="color: black;">Hardware&lt;/a&gt;&lt;/li&gt;<span>      </span></span></span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>         </span>&lt;/ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>      </span></span><span style="color: black;">&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>      </span></span><span style="color: black;" lang="PT-BR">&lt;li&gt;&lt;a href=</span><span lang="PT-BR">"astuces.php"&gt;<span style="color: black;">Astuces&lt;/a&gt;</span></span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>         </span>&lt;ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>            </span>&lt;li&gt;&lt;a href=</span>"astuces_php.php"&gt;<span style="color: black;">PHP/MySQL&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>      </span><span>      </span>&lt;li&gt;&lt;a href=</span>"astuces_css.php"&gt;<span style="color: black;">CSS&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>            </span>&lt;li&gt;&lt;a href=</span>"astuces_html.php"&gt;<span style="color: black;">(x)HTML&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>            </span>&lt;li&gt;&lt;a href=</span><span lang="EN-US">"</span>astuces_<span lang="EN-US">hardware.php"&gt;<span style="color: black;">Graphisme&lt;/a&gt;&lt;/li&gt;<span>      </span></span></span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>         </span>&lt;/ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="EN-US"><span>      </span></span><span style="color: black;" lang="PT-BR">&lt;/li&gt;</span><span style="text-decoration: underline;"></span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;" lang="PT-BR"><span>   </span></span><span style="color: black;">&lt;/ul&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"><span>   </span>&lt;li&gt;&lt;a href=</span>"downloads.php"&gt;<span style="color: black;">Téléchargements&lt;/a&gt;&lt;/li&gt;</span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;"> </span></pre>
<pre style="border: medium none; padding: 0cm;"><span style="color: black;">&lt;/ul&gt;</span></pre>
</div>
<pre><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Si vous testez ce menu, vous voyez que ce n’est pas encore très beau. Nous allons passez au CSS afin de le mettre à l’horizontale, </span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">et qu'au passage de la souris sur l'une des parties de bases, les sous-catégories de cet élément s’affichent.</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Voilà, la partie HTML est fini. Passons à la 2<sup>ème</sup> étape, le CSS.</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span>
<strong><span style="font-size: 13pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #1f497d;">Étape 2 : Le CSS</span></strong>
<strong><span style="font-size: 13pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #1f497d;"> </span></strong></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Nous voici maintenant entrés dans la partie CSS, ce n’est pas plus facile, alors soyez attentif. Commençons par quelques simples modifications du menu, dont la police, l’alignement, etc...</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu, #menu ul /* Liste */<span> </span></span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>padding : 0; /* pas de marge intérieure */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>margin : 0; /* ni extérieure */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>list-style : none; /* on supprime le style par défaut de la liste */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>line-height : 21px; /* on définit une hauteur pour chaque élément */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>text-align : center; /* on centre le texte qui se trouve dans la liste */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu /* Ensemble du menu */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>font-weight : bold; /* on met le texte en gras */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span><span> </span>font-family : </span><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&#8220;</span><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">Trebuchet MS</span><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&#8220;, Arial, times, serif</span><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">; /* on définit plusieurs polices, au cas ou certaines ne seraient pas disponibles */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>font-size : 12px; /* hauteur du texte : 12 pixels */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Intéressons nous maintenant aux liens, c’est à dire au contenu, car rappelez-vous, chaque <em>&lt;li&gt;</em> est un lien, même ne renvoyant sur rien.</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu a /* Contenu des listes */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>display : block; /* on change le type d&#8217;élément, les liens deviennent des balises de type block */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>padding : 0; /* aucune marge intérieure */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background : #000; /* couleur de fond */<span> </span></span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>color : #fff; /* couleur du texte */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>width : 144px; /* largeur */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Maintenant on va s’occuper de tous les &lt;ul&gt; et &lt;li&gt; imbriqués dans les parties de bases.</span>
<span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li /* Éléments des listes */<span> </span></span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{ </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>float : left; </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>/* pour IE qui ne reconnaît pas &#8220;transparent&#8221; */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-right : 1px solid #fff; /* bordure blanche à droite de chaque élément */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">/* IE ne reconnaissant pas le sélecteur &#8220;&gt;&#8221; */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">html&gt;body #menu li</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-right: 1px solid transparent ;</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul /* Sous-listes */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{ </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>position: absolute;</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>width: 144px;</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>left: -999em; /* on envoie loin du champ de vision */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul li /* Eléments de sous-listes */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>/* pour IE */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-top : 1px solid #fff; /* bordure blanche en haut de chaque élément d&#8217;une sous-liste */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">/* IE ne reconnaissant pas le sélecteur &#8220;&gt;&#8221; */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">html&gt;body #menu li ul li<span> </span></span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-top : 1px solid transparent; /* bordure transparente en haut de chaque élément */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul ul </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>margin<span> </span>: -22px 0 0 144px ; /* Décalage des sous-sous-listes pour qu&#8217;elles ne soient pas au dessus des sous-listes */ </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>/* pour */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-left<span> </span>: 1px solid #fff ; /* </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">/* IE ne reconnaissant pas le sélecteur &#8220;&gt;&#8221; */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">html&gt;body #menu li ul ul<span> </span></span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-left<span> </span>: 1px solid transparent ; /* </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Si vous testez de nouveau le menu, vous voyez qu’il a bien changé, mais il ne réagit pas au passage de la souris. Pour remédier à cela, nous allons utiliser les pseudos-formats. <strong>Voilà l’interêt des liens, même quand ils ne renvoient à rien.</strong></span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="text-decoration: underline;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">Rappel </span></span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">: Avec les pseudos-formats, vous pouvez faire réagir des liens au passage de la souris (</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #7030a0;">:hover</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">), au moment du clic (</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #7030a0;">:active</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">), ou lorsque le lien est selectionné (</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #7030a0;">:focus</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;">), etc...</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: red;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Au passage de la souris, nous allons inverser les couleurs de polices, et la couleur de fond (background).</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu a:hover /* Pseudo-format :hover : lorsque la souris passe sur le lien */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>color: #000; /* Texte en noir */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background: #fff; /* Fond maintenant en blanc */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Maintenant, reste à savoir comment faire dérouler le menu au passage de la souris... Il y a un problème avec le pseudo-format </span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #7030a0;">:hover</span><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> : il n’est pas accepté par les anciennes versions de IE. Nous allons donc intégrer un peu de JS (JavaScript).</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Voici la fonction, qui est à inclure sur toute les pages où apparaîtra le menu : </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">sfHover = function() {</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>var sfEls = document.getElementById(&#8221;menu&#8221;).getElementsByTagName(&#8221;LI&#8221;);</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>for (var i=0; i&lt;sfEls.length; i++) {</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>sfEls[i].onmouseover=function() {</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>this.className+=&#8221; sfhover&#8221;;</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>sfEls[i].onmouseout=function() {</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>this.className=this.className.replace(new RegExp(&#8221; sfhover\\b&#8221;), &#8220;&#8221;);</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">if (window.attachEvent) window.attachEvent(&#8221;onload&#8221;, sfHover);</span></p>
</div>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Vous pouvez l’inclure de 2 façons :</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="margin-left: 36pt; text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-size: 11pt; font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">         </span></span></span><!--[endif]--><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">La mettre dans un fichier .js et inclure ce fichier dans toute vos pages où apparaîtra le menu, vous l’inclurez alors comme ceci <em>(le mieux est de mettre ces balises entre les balises head, car le head est inclus dans toutes vos pages)</em> :</span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt; margin-left: 36pt; margin-right: 0cm;">
<p class="MsoListParagraph" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&lt;script type=&#8221;text/javascript&#8221; src=&#8221;menu.js&#8221;&gt;&lt;/script&gt;</span></p>
</div>
<pre style="margin-left: 36pt; text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-size: 11pt; font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">         </span></span></span><!--[endif]--><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Ou mettez le code entre ces 2 balises :</span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt; margin-left: 36pt; margin-right: 0cm;">
<p class="MsoListParagraphCxSpFirst" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&lt;script type=&#8221;text/javascript&#8221;&gt;</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&lt;!&#8211;</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">METTRE LE JAVASCRIPT EN COMMENTAIRES ICI</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">POUR QUE LE SCRIPT SOIT VALIDE W3C</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&#8211;&gt;</span></p>
<p class="MsoListParagraphCxSpLast" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&lt;/script&gt;</span></p>
</div>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"><span>            </span>et mettez ces balises entre les balises <em>&lt;head&gt; </em>et <em>&lt;/head&gt;</em>.</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Ce code écrit en JS va mettre une classe (<span class="courrier">sfHover</span>) aux éléments de nos listes.
Au passage de la souris, cette classe est alors retirée. Cela nous permet donc de faire réagir le menu. Voici comment faire.</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt;">
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul<span> </span>/* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>left: auto; /* Repositionnement normal */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>min-height: 0; /* Corrige un bug sous IE */</span></p>
<p class="MsoNormal" style="border: medium none; padding: 0cm; margin-bottom: 0.0001pt; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Et voilà, nous avons enfin fini. Vous pouvez tester le menu, il marche. N’oubliez pas la partie annexe, qui est très importante et qui vous servira à résoudre vos bugs, alléger vos pages, et personnaliser votre menu.</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span>
<strong><span style="font-size: 13pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #1f497d;">Annexes</span></strong>
<strong><span style="font-size: 13pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: #1f497d;"> </span></strong></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Voici quelques bonnes astuces à connaître : </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="margin-left: 36pt; text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-size: 11pt; font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">         </span></span></span><!--[endif]--><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Taille du menu pour les designs extensibles : pour les designs extensibles, vous n’avez qu’à modifier les hauteurs et largeurs du menu en pixels par des pourcentages.</span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt; margin-left: 36pt; margin-right: 0cm;">
<p class="MsoListParagraphCxSpFirst" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu a </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>display : block; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>padding : 0; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background : #000; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>color : #fff; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>text-decoration : none; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>width : 144px; /* &lt;&lt;&lt;&lt;&lt;&lt; ICI */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">&#8230;</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{ </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>position: absolute; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>width: 144px; /* &lt;&lt;&lt;&lt;&lt;&lt; ET ICI */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>visibility: hidden; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul ul </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>margin<span> </span>: -22px 0 0 144px ; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>border-left<span> </span>: 1px solid #fff ; /* &lt;&lt;&lt;&lt;&lt;&lt; sans oublier ICI */</span></p>
<p class="MsoListParagraphCxSpLast" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre style="margin-left: 36pt; text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Même chose pour la hauteur ;</span></pre>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="margin-left: 36pt; text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-size: 11pt; font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">         </span></span></span><!--[endif]--><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Modification des couleurs</span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt; margin-left: 36pt; margin-right: 0cm;">
<p class="MsoListParagraphCxSpFirst" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu a </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>display : block; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>padding : 0; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background : #000; /* Couleur du fond, actuellement = noir */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>color : #fff; /* Couleur du texte, actuellement = blanc */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>text-decoration : none; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>width : 144px; </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">/* Inversement des couleurs lorsque la souris passe */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"> </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu a:hover </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>color : #000; /* Noir */</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background : #fff; /* Blanc*/</span></p>
<p class="MsoListParagraphCxSpLast" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<pre style="text-align: justify;"><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;"> </span></pre>
<pre style="margin-left: 36pt; text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-size: 11pt; font-family: Symbol; color: black;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;">         </span></span></span><!--[endif]--><span style="font-size: 11pt; font-family: &quot;Arial&quot;,&quot;sans-serif&quot;; color: black;">Possibilité de mettre des images en fond. Mettez en fond une image transparente, et regardez le résultat. Procédez comme ceci :</span></pre>
<div style="border: 1pt solid windowtext; padding: 1pt 4pt; margin-left: 36pt; margin-right: 0cm;">
<p class="MsoListParagraphCxSpFirst" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">#menu li ul li a </span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">{</span></p>
<p class="MsoListParagraphCxSpMiddle" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;"><span> </span>background<span> </span>: transparent url(&#8221;adresse de l&#8217;image transparente&#8221;) repeat ;</span></p>
<p class="MsoListParagraphCxSpLast" style="border: medium none; margin: 0cm 0cm 0.0001pt; padding: 0cm; line-height: normal;"><span style="font-size: 10pt; font-family: &quot;Courier New&quot;;">}</span></p>
</div>
<p class="MsoNormal"><span> </span></p>
<p class="MsoListParagraph" style="text-align: justify; text-indent: -18pt;"><!--[if !supportLists]--><span style="font-family: Symbol;"><span>·<span style="font-family: &quot;Times New Roman&quot;; font-style: normal; font-variant: normal; font-weight: normal; font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none;"> </span></span></span><!--[endif]--><span style="font-family: &quot;Arial&quot;,&quot;sans-serif&quot;;">Pour accélerer le chargement de vos pages, vous pouvez utiliser les commentaires conditionnels. Comme ça, le JS ne s’éxécutera seulement pour IE6 et inférieur, car comme je vous l’ai dit, pour Firefox et les versions supérieurs à la 7<sup>ème</sup> d’IE, il suffit d’utiliser le pseudo-format <span style="color: #7030a0;">:hover</span><span style="color: black;">.</span></span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fxhtml-html-css%2Fmenu-deroulant-en-javascript-398.html&amp;linkname=Menu%20d%C3%A9roulant%20en%20JavaScript" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/xhtml-html-css/menu-deroulant-en-javascript-398.html/feed</wfw:commentRss>
		</item>
		<item>
		<title>Expressions régulières cours n°2</title>
		<link>http://www.astuces-webdesign.com/programmation/expressions-regulieres-n%c2%b02-389.html</link>
		<comments>http://www.astuces-webdesign.com/programmation/expressions-regulieres-n%c2%b02-389.html#comments</comments>
		<pubDate>Thu, 02 Jul 2009 16:05:09 +0000</pubDate>
		<dc:creator>agilisweb</dc:creator>
		
		<category><![CDATA[Programmation]]></category>

		<category><![CDATA[expressions]]></category>

		<category><![CDATA[java]]></category>

		<category><![CDATA[perl]]></category>

		<category><![CDATA[regex]]></category>

		<category><![CDATA[régulières]]></category>

		<guid isPermaLink="false">http://astuces-webdesign.com/?p=389</guid>
		<description><![CDATA[Caractères  littéraux
L&#8217;expression régulière la plus simple est formée d&#8217;un  simple caractère littéral, par ex.g.: a. Cela correspond à la première occurrence de ce  caractère dans la chaîne. Si la chaîne est  Jean est un garçon, cela correspond au a après le e. Le  fait que ce a soit au milieu [...]]]></description>
			<content:encoded><![CDATA[<h2><strong><span style="text-decoration: underline;"><span lang="zxx">Caractères  littéraux</span></span></strong></h2>
<p><span lang="zxx">L&#8217;expression régulière la plus simple est formée d&#8217;un  simple caractère littéral, par ex.g.:</span> <span lang="zxx"><span class="style1">a</span>.</span> <span lang="zxx">Cela correspond à la première occurrence de ce  caractère dans la chaîne.</span> <span lang="zxx">Si la chaîne est  <span class="style3">Jean est un garçon</span>, cela correspond au <span class="style4">a</span> après le <span class="style5">e</span>.</span> <span lang="zxx">Le  fait que ce <span class="style6">a</span> soit au milieu d&#8217;un mot ne gêne pas le moteur de  regex.</span> <span lang="zxx">Dans le besoin, vous devrez vous-même  l&#8217;indiquer au moteur de regex en utilisant des délimiteurs de mots.</span> <span lang="zxx">Nous y viendrons plus tard.</span></p>
<p><span lang="zxx">Ce regex peut trouver également le second <span class="style4">a</span>.</span> <span lang="zxx">Il ne le fera que si vous demandez au moteur de  regex de chercher dans la chaîne au-delà de la première  occurrence.</span> <span lang="zxx">In a text editor, you can do so  by using its &#8220;Find Next&#8221; or &#8220;Search Forward&#8221;  function.</span> <span lang="zxx">Dans un langage de programmation, il existe généralement une fonction séparée que vous pouvez appeler pour parcourir la chaîne après la première occurrence.</span></p>
<p><span lang="zxx">De même, le regex <span class="style1">chat</span> trouvera <span class="style4">chat</span> dans <span class="style7">Des  chiens et des chats</span>.</span> <span lang="zxx">Cette expression  régulière est une série de quatre caractères littéraux. Cela  revient à dire au moteur de regex : trouve un <span class="style1">c</span> suivi immédiatement  d&#8217;un <span class="style1">h</span>, lui-même suivi par <span class="style1">a</span> et <span class="style1">t</span>.</span></p>
<p><span lang="zxx">Notez que les moteurs de regex sont par défaut  sensibles à la casse. <span class="style1">chat</span> ne correspond pas à <span class="style6">Chat</span> sauf si vous  demandez au moteur de regex d&#8217;ignorer la casse.</span></p>
<h2><strong><span style="text-decoration: underline;">Caractères spéciaux</span></strong></h2>
<p><span lang="zxx">Lorsque l&#8217;on a besoin de faire plus qu&#8217;une  recherche littérale de texte, on a besoin de certains caractères  spéciaux.</span> <span lang="zxx">Pour les styles de regex discutés  dans ce tutoriel, il existe 12 caractères avec un usage particulier  :</span></p>
<p><span lang="zxx"><span class="style1">[ ]</span> les crochets<br />
<span class="style1">\</span> l&#8217;antislash<br />
<span class="style1">^</span> le carré<br />
<span class="style1">$</span> le dollar<br />
<span class="style1">.</span> le  point<br />
<span class="style1">|</span> la barre verticale<br />
<span class="style1">?</span> le point  d&#8217;interrogation<br />
<span class="style1">*</span> l&#8217;astérisque<br />
<span class="style1">+</span> le signe plus<br />
<span class="style1">(  )</span> les parenthèses</span></p>
<p><span lang="zxx">Ces caractères  spéciaux sont souvent appelés « métacaractères ».</span></p>
<p><span lang="zxx">Si vous souhaitez utiliser l&#8217;un de ces caractères  en tant que littéral dans un regex, vous devez l&#8217;échapper avec un  backslash.</span> <span lang="zxx">Si vous voulez atteindre <span class="style4">1+1=2</span>, le  regex correct est <span class="style1">1\+1=2</span>.</span> <span lang="zxx">Sinon, le signe  plus a un sens particulier.</span></p>
<p><span lang="zxx">Notez que <span class="style1">1+1=2</span>, sans l&#8217;échappement, est bien un  regex.</span> <span lang="zxx">Donc pas de message d&#8217;erreur.</span> <span lang="zxx">Mais il ne trouvera pas<span class="style3"> 1+1=2</span>.</span> <span lang="zxx">Il  correspondrait à <span class="style4">111=2</span> dans <span class="style3">123+111=234</span>, à cause du sens  particulier du caractère plus,</span></p>
<p lang="zxx">Si vous oubliez d&#8217;échapper un caractère lorsque son  utilisation n&#8217;est pas autorisée, comme dans <span class="style1">+1</span>, alors vous recevrez  un message d&#8217;erreur.</p>
<p><span lang="zxx">La plupart des styles d&#8217;expressions régulières traitent le crochet comme un caractère littéral, à moins qu&#8217;il ne fasse partie d&#8217;un opérateur de répétition comme <span class="style1">{1,3}</span>.</span> <span lang="zxx">Donc la plupart du temps vous  n&#8217;aurez pas à l&#8217;échapper, même si vous pouvez le faire si vous le  souhaitez.</span> <span lang="zxx">Une exception à cette règle est  le package java.util.regex :</span> i <span lang="zxx">l  demande l&#8217;échappement de tous les crochets entrés en littéraux.</span></p>
<p><span lang="zxx">Tous les autres caractères ne sont pas à  échapper avec le backslash.</span> <span lang="zxx">C&#8217;est que le  backslash est lui aussi un caractère spécial.</span> <span lang="zxx">Le  backslash combiné à un caractère littéral peut donner une entrée  de regex douée d&#8217;un sens particulier.</span> <span lang="zxx">Par  ex., <span class="style1">\d</span> va trouver un chiffre simple de 0 à 9.</span></p>
<p><span lang="zxx">Echapper un métacaractère isolé avec un  backslash fonctionne dans tous les styles de regex.</span> <span lang="zxx">Beaucoup  de styles supportent également la séquence d&#8217;échappement \Q &#8230;  \E.</span> <span lang="zxx">All the characters between the \Q and the  \E are interpreted as literal characters.</span> <span lang="zxx">E.g.</span> <span lang="zxx">Tous les caractères compris entre \Q et \E sont  considérés comme des littéraux. Par ex. <span class="style1">\Q*\d+\E</span> va trouver le  littéral <span class="style4">*\d+*</span>.</span> <span lang="zxx">Le E peut être omis à la  fin du regex, donc<span class="style1"> \Q*\d+*</span> est identique à<span class="style1"> \Q*\d+*\E</span>.</span> <span lang="zxx">Cette  syntaxe est supportée par le moteur Jgsoft, Perl, PCRE et Java, dans  et en dehors des classes de caractères.</span> <span lang="zxx">Mais  cela ne fonctionne pas dans Java, avec le JDK 1.4 et 1.5 dans une  classe de caractère ou suivi d&#8217;un quantificateur.</span></p>
<h2><span style="text-decoration: underline;"><strong>Caractères spéciaux et langages de programmation</strong></span></h2>
<p><span lang="zxx">Si vous êtes programmeur, vous pourriez être surpris que les caractères comme l&#8217;apostrophe et le guillemet ne soient pas des caractères spéciaux.</span> <span lang="zxx">C&#8217;est  juste.</span> <span lang="zxx">Lorsque vous utilisez une expression régulière ou un outil grep comme PowerGREP ou bien la fonction de recherche d&#8217;un éditeur comme EditPAD Pro, vous ne devez pas échapper les apostrophes et les guillemets comme dans un langage de programmation.</span></p>
<p><span lang="zxx">Dans votre code source, vous devez vous rappeler quels caractères doivent être modifiés à l&#8217;intérieur des chaînes par votre code.</span> <span lang="zxx">C&#8217;est que ces caractères  seront traités par le compilateur, avant que le moteur de regex ne  les voie.</span> <span lang="zxx">Donc le regex <span class="style1">1\+1=2</span> s&#8217;écrit  &#8220;1\\+1=2&#8243; en C.</span> <span lang="zxx">Le compillateur C++  à son tour va changer les backslashes du code source en un seul  backslash avant de parvenir au regex.</span> <span lang="zxx">Pour  trouver <span class="style4">c:\temp</span>, vous devez utiliser le regex <span class="style1">c:\\temp</span>.</span> <span lang="zxx">La  même chaîne en C++ est représentée par le regex &#8220;c:\\\\temp&#8221;.</span> <span lang="zxx">Cela fait quatre backslashes pour en représenter un  seul !</span></p>
<p lang="zxx">See the tools and languages section of this website for more information on how to use regular expressions in various programming languages.</p>
<h2><span style="text-decoration: underline;"><strong>Caractères non-imprimables</strong></span></h2>
<p><span lang="zxx">Vous pouvez utiliser des séquences de caractères spéciaux pour insérer des caractères non-imprimables dans vos expressions régulières.</span> <span lang="zxx">Avec <span class="style1">\t</span> vous avez  un caractère de tabulation (ASCII 0&#215;09), <span class="style1">\r</span> pour un retour chariot  (0&#215;0D) et <span class="style1">\n</span> pour unretour à la ligne (0&#215;0A).</span> <span lang="zxx">Des  non-imprimables plus exotiques sont par exemple <span class="style1">\a</span> (sonnerie, 0&#215;07),  <span class="style1">\e</span> (échappement, 0&#215;1B), <span class="style1">\f</span> (avancement papier, 0&#215;0C) et <span class="style1">\v </span>(tabulation verticale, 0&#215;0B).</span> <span lang="zxx">N&#8217;oubliez pas  que les fichiers windows utilisent <span class="style1">\r\n</span> pour sauter les lignes, alors  que les programmes sous UNIX utilisent <span class="style1">\n</span>.</span></p>
<p><span lang="zxx">Vous pouvez inclure n&#8217;importe quel caractère dans votre expression régulière si vous connaissez son code hexadécimal en ASCII ou ANSI.</span> <span lang="zxx">Dans les  caractères en Latin- 1, le symbole du copyright est le caractère  0xA9.</span> <span lang="zxx">Donc pour chercher le symbole du  copyright, vous pouvez utiliser <span class="style1">\xA9</span>.</span> <span lang="zxx">Une  manière différente de chercher un tab serait ainsi<span class="style1"> \x09</span></span> <span lang="zxx">Notez que le zéro de tête est obligatoire.</span></p>
<p><span lang="zxx">La plupart des styles de regex supportent  également les commandes <span class="style1">\cA</span> à<span class="style1"> \cZ</span> pour insérer des caractères de  contrôle.</span> <span lang="zxx">La lettre après le backslash est  alors toujours un petit c.</span> <span lang="zxx">La seconde lettre  après le backlash est une majuscule de A à Z, pour indiquer  Contrôle+A à Contrôle+Z.</span> <span lang="zxx">Ils sont  équivalents à <span class="style1">\x01</span> à <span class="style1">\x1A</span> (26 décimaux).</span> <span lang="zxx">Par  ex.</span> <span lang="zxx"><span class="style1">\cM</span> lance un retour chariot, tout comme  <span class="style1">\r</span> et<span class="style1"> \x0D</span>.</span> <span lang="zxx">Dans les expressions régulières  en XML, <span class="style1">\c</span> est un raccourci indiquant tout caractère accepté dans  un nom XML.</span></p>
<p><span lang="zxx">Si votre moteur d&#8217;expressions régulières  supporte Unicode, utilisez<span class="style1"> \uFFFF</span> plutôt que <span class="style1">\xFF</span> pour insérer un  caractère Unicode.</span> <span lang="zxx">Le symbole de l&#8217;Euro est  à la position 0&#215;20AC</span> <span lang="zxx">Si vous ne pouvez pas  le taper sur votre clavier, il est possible de l&#8217;insérer dans une  expression régulière avec <span class="style1">\u20AC</span>.</span></p>
<a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?&amp;linkurl=http%3A%2F%2Fwww.astuces-webdesign.com%2Fprogrammation%2Fexpressions-regulieres-n%25c2%25b02-389.html&amp;linkname=Expressions%20r%C3%A9guli%C3%A8res%20cours%20n%C2%B02" target="_blank"><img src="http://www.astuces-webdesign.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Save/Bookmark"/></a>]]></content:encoded>
			<wfw:commentRss>http://www.astuces-webdesign.com/programmation/expressions-regulieres-n%c2%b02-389.html/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
