Mouvement International pour une Ecologie Libidinale (M.I.E.L.)
Prévention des névroses et de la peste émotionnelle, éducation, formation et vulgarisation scientifique

Exemple illustrant la mise en forme XHTML/CSS

Introduction

Styles CSS

Cette page est mise en forme avec les feuilles de style CSS du MIEL. Pour voir les formats par défaut du navigateur, il vous suffit de sauvegarder cette page sur votre ordinateur, puis de l'ouvrir localement : les liens vers les feuilles de style seront ainsi rompus.
Les éléments marqués d'une astérisque * ne sont pas des éléments du langage HTML mais des "classes" définies dans nos feuilles de style. Ils ne seront pas interprétés sans ces dernières.
Vous pouvez sauvegarder les fichiers de style en enregistrant la cible des liens suivants : https://www.ecologielibidinale.org/miel.css (contient les mises en forme de contenu), https://www.ecologielibidinale.org/miel_menu.css (contient les mises en forme pour les menus) et https://www.ecologielibidinale.org/miel_div.css (contient l'organisation des divisions).

Standards du web

Cette page est une page statique, de plus elle n'utilise aucun script.
Par ailleurs elle est conforme aux standards du Web, en effet :

  • cette page est au format standard XHTML 1.0 transitionnel - le vérifier en cliquant sur cette image Valid XHTML 1.0 Transitional -, et utilise l'encodage de caractère de la norme Unicode UTF-8 ;
  • l'ensemble de fichiers CSS est au format standard CSS 2.1 - le vérifier en cliquant sur cette image CSS Valide ! -, à l'exception de la technique media-query, utilisée pour s'adapter à la taille de la fenêtre du navigateur, qui appartient à la norme CSS 3 ;
  • les règles de mise en forme s'efforcent d'assurer une accessibilité minimale (niveau A) aux personnes handicapées ou mal équipées - explications en cliquant sur cette image Level A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0 ;
  • la validité des liens sortant de cette page peut être vérifiée par l'outil de validation en ligne du W3C.

En conséquence, ce site s'affiche correctement avec les navigateurs qui respectent les standards (c'est le cas notamment du navigateur libre Firefox, mais ce n'est PAS le cas de Microsoft Internet Explorer).
Cette page s'affiche mieux avec une taille de fenêtre d'au moins 1024x768. Avec une taille inférieure, des barres de défilement (ascenseurs) supplémentaires risquent d'apparaître.

Cette page n'est pas une page explicative mais une page d'illustration par l'exemple. Pour plus d'information et la syntaxe complète, reportez-vous aux liens (au bas de cette page) vers des sites qui expliquent en détail (à l'aide de tutoriaux) la mise en forme des pages web. Dans le navigateur libre Firefox vous pouvez afficher le code source de la page ou examiner l'élément (fonctions accessibles par le menu contextuel).

Il convient de préciser qu'il n'est pas nécessaire de maîtriser ces techniques pour créer des pages html simples. Il suffit de les rédiger et de les mettre en forme avec un éditeur de texte tel que celui de LibreOffice/OpenOffice.org, ou mieux, un éditeur html en mode visuel (WYSIWYG) tel que KompoZer ou Amaya.

Sommaire

  1. Les principales balises définissant la nature du contenu
    1. Les balises de blocs
      1. Les titres
      2. Les paragraphes et blocs de texte
      3. Les listes
      4. Les tableaux
    2. Les balises en ligne
      1. Les termes particuliers
      2. Les liens hypertextes
      3. Les passages formatés
  2. Quelques possibilités de mise en forme des caractères
  3. Quelques couleurs
  4. Ressources pour créer un site Internet (liens)

1. Les principales balises définissant la nature du contenu

1.1. Les balises de blocs

1.1.1. Les titres

<h1>Titre de niveau 1</h1>

Paragraphe.

<h2>Titre de niveau 2</h2>

Paragraphe.

<h3>Titre de niveau 3</h3>

Paragraphe.

<h4>Titre de niveau 4 </h4>

Paragraphe.

<h5>Titre de niveau 5 </h5>

Paragraphe.

<h6>Titre de niveau 6 </h6>

Paragraphe.

1.1.2. Les paragraphes et bloc de textes

Ce texte n'est PAS un paragraphe. C'est un simple texte sans format (aucune balise ne le défini). Il est présenté uniquement pour permettre de voir qu'elle est la différence avec un paragraphe, qui lui est formaté. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

<p>Paragraphe. Dans notre feuille de style actuelle, les paragraphes sont justifiés et ont une auteur de ligne de 130%. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p class="centered">Paragraphe centré*. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p class="cite_exergue"><cite>"Paragraphe de citation en exergue* "</cite><br />
Auteur, dans <cite>Source.</cite></p>

<p class="alerte">Paragraphe d'alerte*. C'est un paragraphe qui doit attirer l'attention du lecteur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p class="legende">Paragraphe de type légende*. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p class="mention">Paragraphe de type mention*. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p class="minitexte">Paragraphe en minitexte*. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p>

<p>Paragraphe. Un saut de ligne<br />
Suite du texte à la ligne.</p>

<blockquote>Elément identé sans paragraphe. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</blockquote>

<blockquote><p>Paragraphe identé. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</p></blockquote>

<blockquote><p><cite>"Paragraphe identé avec citation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."</cite> Auteur, dans <cite>Source.</cite></p></blockquote>

<blockquote><p class="cite_colored"><cite>"Paragraphe identé avec citation colorée* et avec forte emphase. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."</cite> Auteur, dans <cite>Source </cite>.</p></blockquote>

<pre>Texte préformaté.
             Prend en compte tous les espaces et tabulations.
Pas de retour à la ligne automatique.
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed non risus. Suspendisse lectus tortor, dignissim sit
amet, adipiscing nec, ultricies sed, dolor. Cras elementum
ultrices diam. Maecenas ligula massa, varius a, semper
congue, euismod non, mi. Proin porttitor, orci nec nonummy
molestie, enim est eleifend mi, non fermentum diam nisl
sit amet erat.</pre>
<address>Signature. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</address>

Ci-dessous une barre horizontale <hr /> :

1.1.3 Les listes

Voici une liste non ordonnée entre <ul> et </ul> :

  • <li>item</li>
  • item
    • item niveau 2
      • item niveau 3
        • item niveau 4
      • item niveau 3
    • item niveau 2
  • item

Puis une liste ordonnée entre <ol> et </ol> :

  1. <li>item</li>
  2. item
    1. item niveau 2
      1. item niveau 3
        1. item niveau 4
      2. item niveau 3
    2. item niveau 2
  3. item

Et enfin une liste de définition entre <dl> et </dl> :

<dt>terme défini</dt>
<dd>définition du terme. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</dd>
terme défini
définition du terme.

1.1.4 Les tableaux

<table width="90%" border="3" cellspacing="5" cellpadding="3"><caption>Tableau de largeur 90% de la page, bordure d'épaisseur 1 pixel, espacement des cellules de 1 et espace autour du texte dans la cellule de 1. Ceci est la légende du tableau </caption>.
<thead>Section d'entête du tableau
<tr>nouvelle ligne
<th scope="col">cellule d'entête de colonne</th>		 <th scope="col">autre cellule d'entête dans l'entête du tableau. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</th>
fin de ligne</tr>
<tr>nouvelle ligne
<td>cellule dans l'entête du tableau.</td>		 <td>dernière cellule de l'entête de tableau</td>
fin de ligne</tr>
fin de section d'entête</thead>
<tfoot>Section pied du tableau
<tr>nouvelle ligne
<th scope="col">cellule d'entête de colonne</th>		 <th scope="col">autre cellule d'entête de colonne dans le pied du tableau</th>
fin de ligne</tr>
<tr>nouvelle ligne
<td>cellule d'une autre ligne dans le pied du tableau. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</td>		 <td>dernière cellule du pied de tableau</td>
fin de ligne</tr>
fin de section de pied</tfoot>
et fin du tableau</table>
<tbody>Section de corps du tableau
<tr>nouvelle ligne
<th scope="row">cellule d'entête de ligne</th>		 <tr>nouvelle ligne
<td style="border-color:#...">cellule avec bordure colorée</td>
fin de ligne</tr>
<tr>nouvelle ligne
<th scope="row">autre cellule d'entête de ligne du corps du tableau</th>		 <td rowspan="2">cellule (deux lignes fusionnées)</td>
fin de ligne</tr>
<tr>nouvelle ligne
<td style="background: url(...)">cellule avec image de fond</td>
<tr>nouvelle ligne
<td colspan="2" align="center">cellule (deux colonnes fusionnées), texte centré</td>
fin de ligne</tr>
<tr>nouvelle ligne
<td align="right">cellule avec texte cadré à droite</td>		 <td bgcolor="#...">cellule avec couleur de fond</td>
fin de ligne</tr>
<tr>nouvelle ligne
<td>autre cellule dans le corps du tableau. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.</td>

<td><p>Ceci est un paragraphe. Saut de ligne<br />.
dernière cellule du corps de tableau.</p></td>
fin de ligne</tr>
fin de section de corps</tbody>

Paragraphe.

<table class="alerte"><tr><td>Ceci est une alerte* dans un tableau</td></tr></table>

Paragraphe.

<table class="tableau_liens" border="1" cellpadding="1"><caption>Ceci est un tableau utilisé pour les liens*. Bordure d'épaisseur 1 pixel, espace autour du texte dans la cellule de 1. Ceci est la légende du tableau. Le tableau ne comprend que la section de corps de tableau.</caption>
Nom du lien URL du lien Langue et description du lien
Nom du lien URL du lien Langue et description du lien

1.2. Les balises en ligne

1.2.1. Les termes particuliers

Dans ce paragraphe on trouve un <dfn>terme défini</dfn>, une expression avec <strong>forte emphase</strong> puis une expression <em>avec emphase</em>. Le mot qui suit est en <b>gras</b>, celui-ci est marqué comme <del>supprimé</del> et le suivant comme <ins>inséré</ins>. Un mot en langue étrangère, mis en italique comme il se doit <i class="notranslate" lang="it" xml:lang="it">al dente</i>, de plus on indique aux robots de traduction automatique que cet élément ne doit pas être traduit. Voici une abréviation (passer la souris dessus)<abbr>CSS</abbr> et un acronyme (passer la souris dessus) <acronym>MIEL</acronym>. Saut de ligne<br />
Voici une image <img src="..." alt="image d'un fichier pdf" width="18" height="15" />fichier pdf de taille 18x15 à laquelle il faut ajouter un texte de remplacement [alt="..."] pour des raisons d'accessibilité. Voici une image porteuse d'un lien <a href="..."><img src="..." alt="fichier pdf" />image d'un fichier pdf</a>, le cadre autour de l'image (encore visible avec Microsoft Internet Explorer 8) peut-être supprimé en ajoutant à celle-ci la proprièté [border="0"]. On peut indiquer la taille d'un fichier à télécharger* comme ceci : <span class="filesize">143 Kio</span>, si le fichier est de grande taille*, on peut attirer l'attention du lecteur comme ceci : <span class="bigfilesize">1430 Kio</span>. Saut de ligne<br />
Voici une <q>citation</q> de Untel dans <cite>Source</cite>. Attention le marqueur <q> - qui rajoute automatiquement des guillemets - n'est pas interprété par le navigateur Microsoft Internet Explorer 6 (encore utilisé par quelques pourcents des internautes). Ceci est une autre présentation d'une <cite>"citation"</cite> de Untel dans <cite>Source</cite>. Saut de ligne<br />
Saut de ligne<br />
Dans les documentations informatique on peut aussi trouver un <code>fragment de code</code>, des <kbd>caractères claviers</kbd>, un <samp>exemple</samp> et une <var>variable</var>.
Voici enfin quelques caractères spéciaux : (un espace insécable &nbsp; précède les deux points), “guillemet anglais double ouvrant et fermant”, ‘guillemet anglais simple ouvrant et fermant’, « guillemet français double ouvrant et fermant », ‹ guillemet français simple ouvrant et fermant ›, tiret—cadratin, symboles monétaires £, €, ¥ ou commerciaux ©, ®, ™, ou encore °, ±, œ. (Voir la source de la page pour connaître le codes correspondants.)

1.2.2. Les liens hypertextes

<a name="..." id="..."></a>Ancre, qui permettra de faire un lien vers cet endroit.

Liste de liens hypertexte personnalisés :

Remarques :

  1. les liens visités ne sont pas détectés comme tels si vous désactivez l'enregistrement de l'historique de navigation ;
  2. dans notre site, les liens vers des pages externes ainsi que liens vers des fichiers PDF s'ouvrent dans une nouvelle fenêtre [target="_blank"] ;
  3. la mise en forme des liens peut changer quand on passe la souris dessus [CSS a:hover].

1.2.3. Les passages formatés

Dans ce paragraphe on trouve <span class="legende">une légende*</span> puis <span class="mention">une mention*</span> et <span class="minitexte">un passage en minitexte*</span>, et enfin <span class="alerte">un passage d'alerte*</span>.

2. Quelques possibilités de mise en forme des caractères

Remarque : Il est déconseillé d'utiliser les styles de police et de taille directement dans le document HTML (fait ici pour l'exemple), elles devraient être utilisées uniquement dans les feuilles de style.

Voici du texte en petites capitales <span style="font-variant:small-caps">. Partie de texte dans une fonte sans sérif <span style="font-family:sans-serif">, partie de texte dans une fonte avec sérif <span style="font-family:serif">, partie de texte dans une fonte cursive <span style="font-family:cursive">, partie de texte dans une fonte fantaisie <span style="font-family:fantasy"> Partie de texte dans une fonte à espacement fixe <span style="font-family:monospace">.

Paragraphe avec du texte en taille normale, c'est à dire celle par défaut ou celle définie dans l'élément html ou dans l'élément body. Voici maintenant du texte en taille 0.5em <span style="font-size:0.5em"> puis maintenant du texte en taille 1em <span style="font-size:1em">. Enfin du texte en taille 3em <span style="font-size:3em">, on voit que la hauteur de ligne n'est pas adaptée. (Retour au texte normal.) Conclusion : si on a besoin d'un texte de taille supérieure au reste, il vaut mieux définir une taille supérieure pour la paragraphe lui-même : voir paragraphe suivant.

Paragraphe en taille 3em <span style="font-size:3em">. Voici du texte en taille 0.5em <span style="font-size:0.5em">, on aura remarqué que l'unité em (empan ?) est une unité relative, la taille effective dépend de la taille définie dans l'objet parent (ici le paragraphe). Remarque on obtient le même résultat si on utilise des % au lieu des em (1em=100%).Voici du texte en taille 1em <span style="font-size:1em"> c'est à dire dans la même taille que le paragraphe !

Paragraphe avec du texte en taille 0.67em <span style="font-size:0.67em">. Ceci correspond à la taille obtenue par <font size="1">, mais la balise <font> est dépréciée, elle doit être évitée. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Paragraphe en taille 0.67em <p style="font-size:0.67em">. Ici l'interligne s'ajuste (en effet <p> comporte par défaut un interligne relatif). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

Paragraphe avec une hauteur de ligne de 2em <p style="line-height:2em">. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat.

3. Quelques couleurs

Les couleurs s'utilisent pour le texte, le fond, les bordures... de multiples éléments. Il est vivement déconseillé d'utiliser les couleurs directement dans le document HTML (fait ici pour l'exemple), elles devraient être utilisées uniquement dans les feuilles de style.
La syntaxe permet d'utiliser soit un nom de couleur (pour les 16 définies - voir tableau) <span style="background-color:lime"> - ce mode est néanmoins déconseillé - soit un code RGB hexadécimal <span style="color:#FF8080"> ou avec des valeurs décimales <span style="color:rgb(255,128,128)"> ou avec des pourcentages <span style="color:rgb(100%,50%,50%)">.

Table des couleurs combinant trois niveaux pour chaque composante (rouge/vert/bleu) :
0 (=#00), 50% (= #80) et 100% (= #FF)
Description Nom Code hexa (sRGB) Couleur
noir black #000000  
rouge vif red #FF0000  
vert vif lime #00FF00  
bleu vif blue #0000FF  
jaune vif yellow #FFFF00  
magenta vif fuchsia #FF00FF  
cyan vif aqua #00FFFF  
blanc white #FFFFFF  
gris clair (25%) silver #C0C0C0  
gris moyen (50%) gray #808080  
rouge foncé maroon #800000  
vert foncé green #008000  
bleu foncé navy #000080  
jaune foncé (kaki) olive #808000  
magenta foncé (mauve) purple #800080  
cyan foncé (vert marin) teal #008080  
rouge clair (rose orangé)   #FF8080  
orange   #FF8000  
rose indien   #FF0080  
vert clair   #80FF80  
vert gazon   #80FF00  
vert-bleu clair   #00FF80  
bleu clair   #8080FF  
violet clair   #8000FF  
bleu-vert clair   #0080FF  
jaune clair   #FFFF80  
magenta clair (rose mauve)   #FF80FF  
cyan clair (bleu oeuf de canard)   #80FFFF  

Remarque : la série #00 #33 #66 #99 #CC #FF représente des incréments de 20%, la série #00 #40 #80 #C0 #FF représente des incréments de 25%.

4. Ressources pour créer un site Internet

World Wide Web consortium (W3C) www.w3.org in english Organisme de standardisation, présente les documents complets pour tous les standards du Web. Les documents sont aussi accessibles en traductions en français.
Site du zéro www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html en français Cours sur la création de pages web (XHTML et CSS).
Alsacréations www.alsacreations.com en français Guide de création de pages web respectant les standards (XHTML et CSS), propose des modèles (gabarits) de mise en page.
OpenWeb openweb.eu.org en français Guides et outils pour le respect des standards du Web.
All HTML www.allhtml.com en français Guides et forum pour tous les langages du Web.
Systran www.systran.fr en français Site commercial mais permettant de traduire gratuitement et automatiquement des phrases ou des pages web. Résultat très approximatif mais pouvant servir de base à une traduction.
Captcha www.captcha.net en français Dispositif (saisie de caractères affichés) destiné à empêcher les robots spammeurs de poster des messages sur un site interactif. Pénible, mieux vaut utiliser une solution alternative.

Cette fiche peut être améliorée grâce à vos contributions : nous contacter.

haut

Mouvement International pour une Ecologie Libidinale - ecologielibidinale.org - Page mise à jour le 23 février, 2018
licence creative commons paternité - non commercial - partage s/s conditions identiques, pour tous les textes de ce site (sauf mention contraire).
Page conforme aux standards XHTML 1.0 Transitionnel et CSS 3.
Ce site s'affiche correctement dans un navigateur qui respecte les standards (ex : Firefox).
Il s'affiche mieux avec une taille de fenêtre d'au moins 1024x768.