HTML GUIDE DES TAGS

 

1°) Présentation

Le HTML (HyperText Markup Language), est un langage de formatage de page Web. Il est basé sur l'utilisation de balises <x> et </x> qui définissent la façon dont le texte, les images ou d'autres objets (comme les applets Java) situés entre les deux balises (ouvertes et fermantes) doivent s'afficher ou se comporter.

2°) Liste de Tags

 

Liste des Tags HTML
<B> ... </B> Gras
<STRONG> ... </STRONG> Forte mise en valeur (gras)
<I> ... </I> Italique
<EM> ... </EM> Mise en valeur italique
<BR> Commencer une nouvelle ligne

<BR CLEAR = "ALL">

<BR CLEAR = "LEFT">

<BR CLEAR = "RIGHT"> ...

Le texte ou l'image suivant(e) est décalé vers le bass, jusqu'à ce qu'il n'y ait plus d'élément de formatage à gauche ou à droite
<NOBR> ... </NOBR> Empêche les sauts de ligne automatiques des navigateurs
<WBR> Dans <NOBR> ... </NOBR> un saut de ligne peut intervenir
<P> Nouvelle ligne + ligne vierge
<P ALIGN = "CENTER"> Le paragraphe suivant est centré
<P ALIGN = "LEFT"> Le paragraphe suivant est aligné à gauche (défaut)
<P ALIGN = "RIGHT"> Le paragraphe suivant est aligné à droite
<H1>...</H1> à <H6>...</H6> Taille maximale du titre... Taille minimale du titre
<Hx ALIGN = "CENTER"> Titre centré
<Hx ALIGN = "LEFT"> Titre aligné à gauche (défaut)
<Hx ALIGN = "RIGHT"> Titre aligné à droite
<HR> Insérer un trait horizontal
<HR WIDTH = "X%"> Largeur du trait en pourcentages
<HR WIDTH = Y> Largeur du trait en pixels
<HR SIZE = X> Hauteur du trait en pixels
<HR ALIGN = "CENTER"> Trait centré (défaut)
<HR ALIGN = "LEFT"> Trait aligné à gauche
<HR ALIGN = "RIGHT"> Trait aligné à droite
<HR NOSHADE> Pas d'affichage "ombré"
<CENTER>...</CENTER> Commande de centrage générale

<FONT SIZE = 1> ...</FONT> à

<FONT SIZE = 7> ...</FONT>

Plus petite taille de caractères jusqu'à la plus grand
<FONT SIZE = +X> Augmenter la taille de caractères de X
<FONT SIZE = -X> Réduire la taille de caractères de X
<BASEFONT SIZE = X> Définir la taille par défaut des caractères
<FONT COLOR = "#XXXXXX"> Définir la taille la couleur du texte (XXXXXX = Valeur hexadécimale)
<BLINK>...</BLINK> Texte clignotant
<PRE>...</PRE> Utiliser police non-proportionnelle (avec affichage de tous les espaces et tous les sauts de ligne !)
<ADDRESS>...</ADDRESS> Adresse (Italique)
<TT>...</TT> Police non-proportionnelle
<CITE>...</CITE> Citation : en principe en italique
<CODE>...</CODE> Code d'un langage de programmation, non-proportionnel
<SAMP>...</SAMP> Sample : en principe en italique
<KBD>...</KBD> Keyboard : en principe en italique
<BLOCKQUOTE>...</BLOCKQUOTE> Longue citation : en principe en retrait, précédée et suivie d'une ligne vierge
<VAR>...</VAR> Variable : en principe en italique

Haut de page

Tags des listes
Liste des Tags HTML
<DL>
<DT> ... </DT>
<DD> ... </DD>
</DL>
Liste de glossaire
<DT> ... </DT> Entrée de texte sans retrait
<DD> ... </DD> Entrée de texte avec retrait
<UL>
<LI>
</UL>
Liste non numérotée
<UL TYPE = DISC> Liste non numérotée identifiée par un disque
<UL TYPE = CIRCLE> Liste non numérotée identifiée par un cercle
<UL TYPE = SQUARE> Liste non numérotée identifiée par un carré
<LI> Entrée de la liste
<OL>
<LI>
</OL>
Liste numérotée
<OL TYPE = 1 START = 1> Liste numérotée identifiée par des nombres et débutant par le nombre 1
<OL TYPE = A START = A> Liste numérotée identifiée par des lettres majuscules et débutant par la lettre A
<OL TYPE = a START = a> Liste numérotée identifiée par des lettres minuscules et débutant par la lettre a
<OL TYPE = i START = i> Liste numérotée identifiée par des chiffres romains minuscules et débutant par le chiffre romain i
<SPAN ID = "[nom]" CLASS = "[nom]"> ... </SPAN> Implémente une feuille de styles
<DIV ID = "[nom]" CLASS = "[nom]"> ... </DIV> Implémente une feuille de styles par blocs entiers
<STYLE> ... </STYLE> Feuille de style

Haut de page

Tags des tableaux
Liste des Tags HTML
<TABLE> ... </TABLE> Encadre le tableau
<TABLE WIDTH = "X%"> Largeur du tableau en pourcentages
<TABLE WIDTH = X> Largeur du tableau en pixels
<TABLE BORDER = X> Largeur de la bordure
<TABLE CELLPADDING = X> Espacement entre bordure et texte
<TABLE CELLSPACING = X> Espacement entre les bordures de cellule
<TABLE COLS = X> ... </TABLE> Tableau composé de X colonnes
<TR> ... </TR> Insérer ligne
<TD> ... </TD> Insérer cellule
<TD WIDTH = "X%"> Largeur de colonne en pourcentages
<TD WIDTH = X> Largeur de colonne en pixels
<TD ALIGN = "CENTER"> Centrer le texte dans la cellule
<TD ALIGN = "RIGHT"> Le texte dans la cellule est aligné à droite
<TD ALIGN = "LEFT"> Le texte dans la cellule est aligné à gauche
<TD COLSPAN = X> Nombre de cellules à fusionner horizontalement
<TD ROWSPAN = X> Nombre de cellules à fusionner verticalement

Haut de page

Tags des hyperliens
Liste des Tags HTML
<A HREF = "http:// ..."> ... </A> Hyperlien vers une page Web
<A HREF = "ftp:// ..."> ... </A> Hyperlien vers une adresse FTP
<A HREF = "telnet:// ..."> ... </A> Hyperlien vers une adresse Telnet
<A HREF = "gopher:// ..."> ... </A> Hyperlien vers une adresse Gopher
<A HREF = "news:// ..."> ... </A> Hyperlien vers une adresse Newsgroup
<A HREF = "mailto: ..."> ... </A> Hyperlien vers une adresse eMail
<A HREF = "NomdeFichier"> ... </A> Hyperlien vers un fichier local
<A HREF = "chat/NomdeFichier"> ... </A> Hyperlien vers un fichier local dans le sous dossier chat
<A HREF = "NomdeFichier#abc"> ... </A> Hyperlien vers un fichier local, à la marque de saut "abc" du fichier "NomdeFichier"
<A NAME = "abc"> ... </A> Définition d'une marque de saut
<A HREF = "NomdeFichier"> <IMG SRC = "NomdeFichier"> ... </A> Image avec hyperlien

Haut de page

Tags des images
Liste des Tags HTML
<IMG SRC = "NomdeFichier"> Insérer une image (GIF ou JPG). Ce tag permet aussi d'insérer des images entrelacées, transparentes ou animées
<IMG SRC = "NomdeFichier" ALIGN = "..."> Positionner une image
<ALIGN = "TOP"> Aligner l'image en haut
<ALIGN = "MIDDLE"> Aligner l'image au milieu
<ALIGN = "BOTTOM"> Aligner l'image en bas
<ALIGN = "LEFT"> Aligner l'image à gauche
<ALIGN = "RIGHT"> Aligner l'image à droite
<IMG SRC = "NomdeFichier" WIDTH = X HEIGHT = Y> Mise à l'échelle de l'image, en taille X pixels sur Y pixels. (WIDTH et HEIGHT ont aussi pour effet d'afficher le texte de la page avant le chargement de l'image !)
<IMG SRC = "NomdeFichier2" LOWSRC = "NomdeFichier1"> D'abord chargement de l'image 'NomdeFichier1', puis remplacement par 'NomdeFichier2'
<IMG SRC = "NomdeFichier" BORDER = X> Définition de la bordure d'une image avec hyperlien (X = pixels, X = 0 pas de bordure)
<IMG SRC = "NomdeFichier" ALT = "ici texte"> Affichage d'un texte à la place d'une image non affichable
<IMG SRC = "NomdeFichier" HSPACE = X VSPACE = Y> Espacements horizontal et vertical entre image et texte

Haut de page

Liste des Tags HTML
<A HREF = "NomdeFichier"> ... </A> Hyperlien vers fichier de son ou vidéo (formats courants : WAV, AU, AVI, MOV, MPG, MID)
<OBJECT codetype = "[type de l'application]" classid = [programme] width = "[valeur]" height = "[valeur]">...</OBJECT> Insertion d'un objet multimédia dans la page

Haut de page

Tags des frames
Liste des Tags HTML
<FRAMESET>
<FRAME>
...
</FRAMESET>
Définition d'une structure Frame
<FRAMESET ROWS = "X%, Y%, ..."> Fractionnement horizontal de la fenêtre avec indication de taille en pourcentages
<FRAMESET ROWS = "X, Y, ..."> Fractionnement horizontal de la fenêtre avec indication de taille en valeur absolue
<FRAMESET COLS = "X%, Y%, ..."> Fractionnement vertical de la fenêtre avec indication de taille en pourcentages
<FRAMESET COLS = "X, Y, ..."> Fractionnement vertical de la fenêtre avec indication de taille en valeur absolue
<FRAME> Crée une fenêtre de Frame vide
<FRAME SRC = "NomdeFichier" > Affiche le fichier dans la fenêtre de Frame
<FRAME SRC = "NomdeFichier" NORESIZE> Fige la taille de la fenêtre
<FRAME SRC = "NomdeFichier" SCROLLING = "YES"> Force l'affichage de barres de défilement
<FRAME SRC = "NomdeFichier" SCROLLING = "NO"> Force le masquage de barres de défilement
<FRAME SRC = "NomdeFichier" MARGINWIDTH = X> Espacement entre le texte ou les images et les bordures gauche et droite de la fenêtre (en pixels)
<FRAME SRC = "NomdeFichier" MARGINHEIGHT = X> Espacement entre le texte ou les images et les bordures haute et basse de la fenêtre (en pixels)
<FRAME SRC = "NomdeFichier" NAME = "name"> Affecte un nom à la fenêtre Frame
<FRAME SRC = "NomdeFichier" TARGET = "name"> Affiche le fichier 'NomdeFichier' dans la fenêtre Frame appelée name
<NOFRAMES> ... </NOFRAMESGT> Le contenu de ce tag n'est exploité que par les navigateurs non compatibles Frames

Haut de page

Tags des formulaires
Liste des Tags HTML
<FORM> ... </FORM> Encadre un formulaire
<FORM ACTION = "..." METHOD = "..." > Pour un formulaire eMail : ACTION = "mailto:nom@adresse" METHOD = "post"
<BUTTON type = "submit" NAME = "[nom]" VALUE = "[valeur]"> ... </BUTTON> Bouton de commande
<INPUT TYPE = "submit" VALUE = "text"> Envoyer le formulaire (bouton Submit)
<INPUT TYPE = "reset" VALUE = "text"> Effacer le formulaire (bouton Reset)
<INPUT NAME = "name" SIZE = X MAXLENGHT = Y> Champ de saisie d'une ligne, de longueur X et de longueur maximale Y
<TEXTAREA NAME= "name" ROWS = X COLS = Y> ... </TEXTAREA> Champ de saisie de plusieurs lignes, de longueur X et de longueur maximale Y
<INPUT TYPE = "radio" NAME = "name" VALUE = "valeur1"> Case d'option
<INPUT TYPE = "radio" NAME = "name" VALUE = "valeur2"> Pour chaque case d'option, il faut un tag <INPUT>. Tous les tags <INPUT> d'un même groupe disposent de la même valeur pour NAME et de valeurs distinctes pour VALUE
<INPUT TYPE = "checkbox" NAME = "name" VALUE = "valeur1"> Case à cocher
<INPUT TYPE = "checkbox" NAME = "name" VALUE = "valeur2"> Pour chaque case d'option, il faut un tag <INPUT>. Tous les tags <INPUT> d'un même groupe disposent de la même valeur pour NAME et de valeurs distinctes pour VALUE
<SELECT NAME = "name" SIZE = X>
<OPTION> text1
<OPTION> text2
...
</SELECT>
Liste de choix avec X lignes (barre de défilement automatique) Chaque entrée de liste fait l'objet d'un tag <OPTION>
<SELECT ... MULTIPLE> MULTIPLE a pour effet de permettre les sélections multiples

Haut de page

Liste des Tags HTML
<HEAD> ... </HEAD> Encadre l'en-tête d'un fichier HTML
<TITLE> ... </TITLE> Contient le titre d'un fichier HTML
<META NAME = "description" CONTENT = "description"> Les robots de recherche utilisent la description dans leur index.
<META NAME = "keywords" CONTENT = "Mot-clé, Mot-clé, ..."> Les robots de recherche utilisent les mot-clés dans leur index.
<META HTTP-EQUIV = "refresh" CONTENT = "X"> Rechargement du fichier après X secondes
<META HTTP-EQUIV = "refresh" CONTENT = "X URL = NomdeFichier"> Après X secondes, le fichier NomdeFichier est chargé à la place du fichier actuel
<BASE HREF = "http://adresse"> Adresse de la page HTML (exploitée en cas d'erreur de transmission)

Haut de page

Liste des Tags HTML
<BODY> ... </BODY> Encadre le corps du fichier HTML
<BODY BGCOLOR = "#XXXXXX"> Couleur d'arrière-plan du fichier HTML (XXXXXX = valeur hexadécimale)
<BODY TEXT = "#XXXXXX"> Couleur du texte (XXXXXX = valeur hexadécimale)
<BODY LINK = "#XXXXXX"> Couleur des hyperliens (XXXXXX = valeur hexadécimale)
<BODY VLINK = "#XXXXXX"> Couleur des hyperliens déjà visités (XXXXXX = valeur hexadécimale)
<BODY ALINK = "#XXXXXX"> Couleur des hyperliens activés (la couleur que prendra le lien lorsque l'on cliquera dessus) (XXXXXX = valeur hexadécimale)
<BODY BACKGROUND = "NomdeFichier"> Image d'arrière plan d'un fichier HTML (GIF ou JPG)
<FRAMESET> ... </FRAMESET> Remplace le tag <BODY> dans les fichiers Frame (voir FRAMES)

 

Liste des Tags HTML
<HTML> ... </HTML> Encadre l'ensemble du fichier HTML
<SCRIPT LANGUAGE = "nom"> ... </SCRIPT> Déclaration d'un langage de script

Haut de page