Exemple illustrant la mise en forme XHTML/CSS (Titre niveau 1 <h1>)

Remarques introductives :

Cette page est mise en forme avec les pages de style CSS du MIEL. Pour voir les formats par défaut du navigateur, il vous suffit de sauvegarder ce fichier 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 pages 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 : http://www.ecologielibidinale.org/miel.css (contient les mises en forme de contenu) et http://www.ecologielibidinale.org/miel_div-GfCdDf.css (contient l'organisation des divisions).

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

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 apparaitront pour les menus latéraux.

Cette page n'est pas une page explicative mais une page d'illustration par l'exemple. Pour plus d'infomation 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.

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

Sommaire

  1. Les principales balises définissant la nature du contenu
  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 (ceci est un titre de niveau 2 <h2>)

Titre niveau 3 <h3>

Paragraphe <p>.

Titre niveau 4 <h4>

Paragraphe.

Titre niveau 5 <h5>

Paragraphe.

Titre niveau 6 <h6>
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é. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe <p>. Ceci est un paragraphe. Dans notre feuille de style actuelle, les paragraphes sont justifiés et ont une auteur de ligne de 130%. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe centré* <p class="centered">. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

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

Ceci est un paragraphe <p> avec un hyperlien <a href="..."> non visité suivi d'un hyperlien visité [a:visited] - à noter : les liens visités ne sont pas détectés si vous désactivez l'enregistrement de l'historique de navigation ; suivi d'un lien externe* <a class="lien_externe"> non visité suivi d'un lien externe* visité. Remarque : 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"]. Ceci est hyperlien vers une page traduite <a class="lien_traduit"> non visité suivi d'un hyperlien visité. La mise en forme des liens peut changer quand on passe la souris dessus [a:hover]. Passage à la ligne <br />.
Dans le texte on trouve un terme défini <dfn>, une expression avec forte emphase <strong> puis une expression avec emphase <em>. Le mot qui suit est en gras <b> et le suivant est un mot en langue étrangère, mis en italique comme il se doit al dente <i class="notranslate" lang="it" xml:lang="it">, de plus on indique aux robots de traduction automatique que cet élément ne doit pas être traduit. On y trouve aussi une abréviation (passer la souris dessus) CSS <abbr> et un acronyme (passer la souris dessus) MIEL <acronym> . Voici une image fichier pdf <img src="..." /> de taille 18x15 à laquelle il faut ajouter un texte de remplacement [alt="..."] pour des raisons d'accessibilité. Voici une image porteuse d'un lien image d'un fichier pdf, le cadre autour de l'image peut-être supprimé en ajoutant à celle-ci la proprièté [border="0"]. Voici une citation <q> de Untel dans Source <cite>. Attention le marqueur <q> n'est pas interprété par le navigateur Microsoft Internet Explorer 6 (encore largement utilisé). Ceci est une autre présentation d'une "citation" <cite> de Untel dans Source <cite>.
Voici enfin quelques caractères spéciaux : (un espace insécable précède le :), “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 °, ±, œ.

Elément identé <blockquote> sans paragraphe. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe :

Paragraphe identé <blockquote><p>. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

"Paragraphe identé avec citation <blockquote><p><cite>, sans paragraphe. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan." Auteur, dans Source <cite>.

"Paragraphe identé avec citation avec très forte emphase* <blockquote><p><span class="stronger"><cite>. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan " Auteur, dans Source <cite>.

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

Texte préformaté <pre>. Pas de retour à la ligne automatique. Saut de ligne.
doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe. Voici une liste non ordonnée <ul> :

Paragraphe. Puis une liste ordonnée <ol> :

  1. item <li>
  2. item
    1. item
      1. item
        1. item
      2. item
    2. item
  3. item

Paragraphe. Et enfin une liste de définition <dl> :

terme défini <dt>
définition du terme <dd>. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.
terme défini
définition du terme.

Paragraphe.

Ceci est la légende du tableau <caption>. Saut de ligne <br />.
Tableau <table> 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.
Première ligne <tr>, cellule d'entête <th> dans l'entête du tableau <thead> cellule d'entête dans l'entête du tableau. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan
cellule <td> d'une autre ligne <tr> dans l'entête du tableau. dernière cellule de l'entête de tableau
cellule d'entête <th> dans le pied du tableau <tfoot> cellule d'entête dans le pied du tableau
cellule <td> d'une autre ligne <tr> dans le pied du tableau dernière cellule du pied de tableau
cellule <td> dans le corps du tableau <tbody> avec bordure colorée [style="border-color:#..."] cellule (deux lignes fusionnées) [rowspan="2"]
cellule dans le corps du tableau avec image de fond [style="background: url(...)"]
cellule (deux colonnes fusionnées) [colspan="2"], texte centré <div align="center">
cellule avec texte cadré à droite <div align="right">
cellule dans le corps du tableau avec couleur de fond
autre cellule dans le corps du tableau. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Ceci est un paragraphe <p>. Saut de ligne <br />.
dernière cellule du corps de tableau. Saut de ligne <br />.
doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe d'alerte* <p class="alerte">. C'est un paragraphe qui doit attirer l'attention du lecteur. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Ceci est une alerte* dans un tableau <table class="alerte">
Légende* <span class="legende"> doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe.

Adresse <address> doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe.

Mention* <span class="mention"> doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.

Paragraphe. Ci-dessous une barre horizontale <hr />.


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

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

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

Paragraphe avec une hauteur de ligne de 2em <p style="line-height:2em">. doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan doukipudonctan.


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 <color:rgb(100%,50%,50%)>.

Table des couleurs combinant trois niveaux pour chaque composante (rouge/vert/bleu) :
0, 50% (= #80) et 100% (= #FF)
Description Name 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 silver #C0C0C0  
gris moyen 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%.


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.

Fin du contenu.


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

précédent Retour au dossier informatique                             Vers les autres fiches pratiques suivant


Mouvement International pour une Ecologie Libidinale (M.I.E.L.) - www.ecologielibidinale.org - Dernière mise à jour le 9 septembre, 2010
copyleft paternité - non commercial - partage s/s conditions identiques, pour tous les textes de ce site (sauf mention contraire).