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.
Paragraphe <p>.
Paragraphe.
Paragraphe.
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
<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
,
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> :
Paragraphe. Et enfin une liste de définition <dl> :
Paragraphe.
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 />. |
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"> |
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 />.
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.
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%)>.
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%.
World Wide Web consortium (W3C) | www.w3.org | ![]() ![]() |
Site du zéro | www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votre-site-web.html | ![]() |
Alsacréations | www.alsacreations.com | ![]() |
OpenWeb | openweb.eu.org | ![]() |
All HTML | www.allhtml.com | ![]() |
Systran | www.systran.fr | ![]() |
Captcha | www.captcha.net | ![]() |
Fin du contenu.
Retour au dossier informatique
Vers les autres fiches pratiques