Tag HTML |
Affichage |
Remarques |
Tags spéciaux |
Correspondance des codes HTML composant la police
de caractères Latin1 |
|
|
Bonjour     Monsieur |
Bonjour     Monsieur |
Espace forcé |
Monsieur <!-- Bonjour --> Monsieur |
Monsieur Monsieur |
Commentaires n'apparaissant pas à l'affichage |
<HEAD>
<TITLE>Exemples de tags HTML</TITLE>
<META HTTP-EQUIV="distribution" CONTENT="global">
<META HTTP-EQUIV="copyright" CONTENT="Michel Crausaz 1999">
<META HTTP-EQUIV="reply-to" CONTENT="Michel.Crausaz@obs.unige.ch">
<META NAME="author" CONTENT="Michel Crausaz">
<META NAME="keywords" CONTENT="Observatoire de Genève, Crausaz, Chromosome">
<META NAME="description" CONTENT="Site personnel: photos, divers">
</HEAD>
|
Méta-Tags dans l'entête
keywords = mots clefs representant le contenu de la page (ou du site) destinés aux moteurs de recherches
description = Petit descriptif du contenu de la page (ou du site)
|
<HEAD>
<TITLE>Exemples de tags HTML</TITLE>
<STYLE type="text/css">
BODY { background-color: white; font-family: helvetica}
PRE { font-family: monospace; font-size: 12pt }
H1 { text-align: center; font-size: 18pt }
H2 { text-align: left; font-size: 16pt }
H3 { text-align: right; font-size: 14pt }
H4 { font-size: 12pt }
H5 { font-size: 10pt }
H6 { font-size: 8pt }
P { font-size: 12pt }
</STYLE>
</HEAD>
|
Définition des polices et des tailles dans l'entête
Prime sur les déclarations dans <BODY> |
<BODY BGCOLOR="#F6E4FF" TEXT="#BLACK" LINK="#0000FF" ALINK="#FF2020" VLINK="#FF00FF">
<BODY BACKGROUND="/icones/blue_paper.gif" TEXT="#BLACK" LINK="#0000FF" ALINK="#FF2020" VLINK="#FF00FF">
|
Attributs de la page. Les couleurs peuvent être données en hexa ou en lettres
BACKGROUND="charge une image comme fond de page"
BGCOLOR="couleur du font de la page"
TEXT="couleur texte"
LINK="couleur du link vierge"
ALINK="couleur du link sous le curseur de la souris"
VLINK="couleur du link déja visité"
|
Séparations |
Bonjour<BR> Monsieur |
Bonjour Monsieur |
Force un retour à la ligne |
Bonjour<P> <P> <P> Monsieur<P> Dupanloup |
Bonjour Monsieur Dupanloup |
Aligne à gauche par défault le paragraphe suivant
Il est inutile d'en mettre deux de suite, seul le premier est pris en considération |
Bonjour<P>  <P> <P> Monsieur<P> Dupanloup |
Bonjour Monsieur Dupanloup |
Aligne à gauche par défault le paragraphe suivant
Le seul moyen pour sauter plusieur lignes est de faire suivre <P> par un espace: <P>  |
Bonjour<P> Monsieur<P> Dupanloup |
Bonjour Monsieur Dupanloup |
Aligne à gauche par défault le paragraphe suivant |
Bonjour<P ALIGN=CENTER> Monsieur</P> Dupanloup |
Bonjour Monsieur Dupanloup |
Aligne au centre le paragraphe suivant |
Bonjour<P ALIGN=RIGHT> Monsieur</P> Dupanloup |
Bonjour Monsieur Dupanloup |
Aligne à droite le paragraphe suivant |
Bonjour <HR> Bonjour |
Bonjour Bonjour |
Le texte passe automatiquement à la ligne avant et après la ligne |
Bonjour <HR SIZE="4"> Bonjour |
Bonjour Bonjour |
Epaisseur de la ligne |
Bonjour <HR SIZE="4" WIDTH="40"> Bonjour |
Bonjour Bonjour |
Longeur de la ligne en pixel |
Bonjour <HR SIZE="6" WIDTH="40%"> Bonjour |
Bonjour Bonjour |
Longeur de la ligne en % |
Bonjour <HR SIZE="6" WIDTH="40%" ALIGN=LEFT> Bonjour |
Bonjour Bonjour |
Aligné à gauche |
Bonjour <HR SIZE="6" WIDTH="40%" ALIGN=RIGHT> Bonjour |
Bonjour Bonjour |
Aligné à droite |
Structure du document |
Monsieur <H1>Bonjour</H1> Monsieur |
Monsieur Bonjour Monsieur |
Saut de paragraphe avant et après le texte mis entre les balises
Aligné au centre par <STYLE> dans l'entête |
<H2>Bonjour</H2> Monsieur |
Bonjour Monsieur |
Tag utilisé en général pour les titres
Aligné à gauche par <STYLE> dans l'entête |
<H3>Bonjour</H3> Monsieur |
Bonjour Monsieur |
Tag utilisé en général pour les titres
Aligné à droite par <STYLE> dans l'entête |
<H4>Bonjour</H4> Monsieur |
Bonjour Monsieur |
Aligné à gauche par défault |
<H4 ALIGN=CENTER>Bonjour</H4> Monsieur |
Bonjour Monsieur |
Aligné au centre |
<H4 ALIGN=RIGHT>Bonjour</H4> Monsieur |
Bonjour Monsieur |
Aligné à droite |
<H5>Bonjour</H5> Monsieur |
Bonjour Monsieur |
Aligné à gauche par défault |
<H6>Bonjour</H6> Monsieur |
Bonjour Monsieur |
Aligné à gauche par défault |
Tailles et couleurs du texte |
<FONT SIZE="6">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
Le texte reste à la suite ! |
<FONT SIZE="5">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
|
<FONT COLOR="GREEN" SIZE="4">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
On peut varier les couleurs |
<FONT COLOR="YELLOW" SIZE="3">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
|
<FONT COLOR="RED" SIZE="2">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
|
<FONT COLOR="RED" SIZE="1">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
|
Tailles et couleurs |
<FONT COLOR="BLUE" SIZE="-1">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
A éviter |
<FONT COLOR="BLUE" SIZE="+1">Bonjour</FONT> Monsieur |
Bonjour Monsieur |
A éviter |
Style physique |
<U>Bonjour</U> Monsieur |
Bonjour Monsieur |
Souligné |
<STRIKE>Bonjour</STRIKE> Monsieur |
Bonjour Monsieur |
Barré |
<I>Bonjour</I> Monsieur |
Bonjour Monsieur |
Italique |
<B>Bonjour</B> Monsieur |
Bonjour Monsieur |
Gras (Bold) |
<STRONG>Bonjour</STRONG> Monsieur |
Bonjour Monsieur |
Gras (Bold) |
<BIG>Bonjour</BIG> Monsieur |
Bonjour Monsieur |
Gras et plus grand |
<TT>Bonjour</TT> Monsieur |
Bonjour Monsieur |
Caractères de type machine à écrire (télétype) Attention police non proportionnelle |
Style logique |
<CITE>Bonjour</CITE> Monsieur |
Bonjour Monsieur |
Citation |
<CODE>Bonjour</CODE> Monsieur |
Bonjour Monsieur |
Exemple de programme informatique
Caractères de type machine à écrire (télétype) Attention police non proportionnelle |
<DFN>Bonjour</DFN> Monsieur |
Bonjour Monsieur |
Définition d'un terme |
<EM>Bonjour</EM> Monsieur |
Bonjour Monsieur |
Mise en valeur d'un texte |
<KBD>Bonjour</KBD> Monsieur |
Bonjour Monsieur |
Illustre une saisie au clavier |
<SAMP>Bonjour</SAMP> Monsieur |
Bonjour Monsieur |
Exemple de texte
Caractères de type machine à écrire (télétype) Attention police non proportionnelle |
<VAR>Bonjour</VAR> Monsieur |
Bonjour Monsieur |
Présentation d'une variable dans un contexte informatique |
Style paragraphe |
<ADDRESS>Bonjour</ADDRESS> Monsieur |
Bonjour Monsieur |
Pour une adresse ou une signature |
Monsieur <BLOCKQUOTE>Bonjour</BLOCKQUOTE> Monsieur |
Monsieur Bonjour Monsieur |
Illustre une saisie au clavier
Saut de paragraphe avant et après le "Bonjour" |
Monsieur
<PRE>
Bonjour
<B>vous</B>
ici ?
</PRE>
Monsieur |
Monsieur
Bonjour
vous
ici ?
Monsieur |
Respecte et affiche le texte comme il a été saisi
Saut de paragraphe avant et après le texte mis entre les balises
Un tag HTML <B>texte</B> entre les balises <PRE> sera interprété par le browser sauf si il est écrit:
<B> texte </B>
|
Listes descriptives |
Vous ici
<UL>
<LI>Bonjour
<LI>Monsieur
<UL>
Quel hasard |
Vous ici
Quel hasard |
Indentation
Saut de paragraphe avant et après <UL>texte<UL> |
Vous ici
<UL TYPE=CIRCLE>
<LI>Bonjour
<LI>Monsieur
<UL>
Quel hasard |
Vous ici
Quel hasard |
Indentation |
Vous ici
<UL TYPE=DISC>
<LI>Bonjour
<LI>Monsieur
<UL>
Quel hasard |
Vous ici
Quel hasard |
Indentation
|
Vous ici
<UL TYPE=SQUARE>
<LI>Bonjour
<LI>Monsieur
<UL>
Quel hasard |
Vous ici
Quel hasard |
Indentation |
Vous ici
<OL>
<LI>Bonjour
<LI>Monsieur
<OL>
Quel hasard |
Vous ici
- Bonjour
- Monsieur
Quel hasard |
Indentation avec des chiffres par défault
Saut de paragraphe avant et après <OL>texte<OL> |
Vous ici
<OL TYPE=a>
<LI>Bonjour
<LI>Monsieur
<OL>
Quel hasard |
Vous ici
- Bonjour
- Monsieur
Quel hasard |
Indentation avec des minuscules |
Vous ici
<OL TYPE=A>
<LI>Bonjour
<LI>Monsieur
<OL>
Quel hasard |
Vous ici
- Bonjour
- Monsieur
Quel hasard |
Indentation avec des majuscules |
Vous ici
<OL TYPE=I>
<LI>Bonjour
<LI>Monsieur
<OL>
Quel hasard |
Vous ici
- Bonjour
- Monsieur
Quel hasard |
Indentation avec des chiffres romains |
Vous ici
<OL TYPE=1>
<LI>Bonjour
<LI>Monsieur
<OL>
Quel hasard |
Vous ici
- Bonjour
- Monsieur
Quel hasard |
Indentation avec des chiffres arabes |
Vous ici
<DL>
<DT>Bonjour
<DD>Madame Dubois
<DT>Bonjour
<DD>Monsieur Dupont
<DL>
Quel hasard |
Vous ici
- Bonjour
- Madame Dubois
- Bonjour
- Monsieur Dupont
Quel hasard |
Liste descriptive
Saut de paragraphe avant et après <DL>texte<DL> |
Vous ici
<DL COMPACT>
<DT>Bonjour
<DD>Madame Dubois
<DT>Bonjour
<DD>Monsieur Dupont
<DL>
Quel hasard |
Vous ici
- Bonjour
- Madame Dubois
- Bonjour
- Monsieur Dupont
Quel hasard |
Liste descriptive
Saut de paragraphe avant et après <DL>texte<DL> |
Divers |