Les balises HTML

par | Jan 3, 2021 | Codage

INTERNET

Les balises html

 

Les codes de définition d'un fichier HTML


Ces codes sont obligatoires. Ils permettent en particulier de délimiter les pages HTML.


< HTML >... < /HTML > Délimitation (début et fin) d'un fichier Html
< HEAD >...< /HEAD > délimitation de l'en-tête d'un fichier Html
< TITLE >...< /TITLE > Titre affiché par le browser (élément de HEAD)
< META.......... > Codification utilisé par certain moteur de recherche (voir page sur les codes META)
>< BODY >...< /BODY > Délimitation (début et fin) du code qui sera affiché sur le navigateur
< BODY bgcolor="#XXXXXX" > Couleur d'arrière-plan (codage RVB en hexadécimal)
>< BODY background="xyz.gif" > >Image affichée en arrière-plan de la page
< !--...-- > Pour placer des commentaires au sein de pages html


 

Code de mise en forme du texte


Ces balises permettent de jouer sur les caractères et la mise en page du texte.
< B >...< /B > Texte en gras
< STRONG >...< /STRONG > idem d'une autre manière
< SUB >...< /SUB > Texte en indice
< SUP >...< /SUP > Texte en exposant
< U >...< /U > Texte souligné
< EM >...< /EM > Texte en italique
< I >...< /I > idem d'une autre manière
< BLINK >...< /BLINK > Texte clignotant (Netscape seul)
< BIG >...< /BIG > Agrandissement de la taille des caractères
< SMALL >...< /SMALL > Réduction de la taille des caractères
< FONT color="#XXXXXX" >...< /FONT > Texte en couleur où XXXXXX est une valeur hexadécimale (codage RVB)
< FONT size=A >...< /FONT > Taille des caractères où A est une valeur de 1 à 7
>< NOBR >...< /NOBR > Empêche les ruptures automatiques de ligne des navigateurs
< PRE >...< /PRE > Texte préformaté, soit avec affichage de tous les espaces et sauts de ligne
< BR > A la ligne
< BLOCKQUOTE >...< /BLOCKQUOTE > Texte écrit en retrait (équivalent d'une tabulation)
< CENTER >...< /CENTER >
< DIV align=cente r> ...< /DIV > Idem d'une autre manière
< DIV align=left > ...< /DIV > Aligne à gauche les éléments (textes, images, liens, tableaux, ...) compris entre ces deux balises
< DIV align=right > ...< /DIV > Aligne à droite les éléments (textes, images, liens, tableaux, ...) compris entre ces deux balises

< Hx >...

< Hx align=center >...

< Hx align=left >...

< Hx align=right >...

Texte où x a une valeur de 1 à 7

Texte centré

Texte aligné à gauche

Texte aligné à droite

< P >...< /P >

< P align=center >...< /P >

< P align=left >...< /P >

< P align=right >...< /P >

Nouveau paragraphe

Paragraphe centré

Paragraphe aligné à gauche

Paragraphe aligné à droite



Code pour gérer des listes


< UL >

< LI >.......< /LI >

< /UL >

Début d'une liste, non numérotée avec utilisation de puce.

Elément de liste

Détermine la fin de la liste

< OL >

< LI >

< /OL >

Débute une liste numérotée

Elément de liste

Détermine la fin de la liste

< DL >

< DT >...< /DT >

< DD >...< /DD >

< /DL >

Liste de type glossaire

Terme de glossaire (sans retrait)

Explication du terme (avec retrait)

Fin du glossaire

< HR >

Trait horizontal (centré par défaut)

< HR width="x%" >

Largeur du trait en % de la taille de la fenêter du navigateur

< HR width=x >

Largeur du trait en pixels

< HR size=x >

Epaisseur du trait en pixels

< HR align=center >

< HR align=left >

< HR align=right >

Trait centré (défaut)

Trait aligné à gauche

Trait aligné à droite

< HR noshade >

Trait sans effet d'ombrage


Code pour créer des liens web


< A href="http://..." >...< /A >

Lien vers une page Web situé sur un autre serveur.

< A href="mailto:..." >...< /A >

Lien vers une adresse Email

< A href="fichier.htm" >...< /A >

Lien vers une page locale fichier.htm située dans le même dossier

< A name="xyz" >...< /A >

Définition d'une ancre

< A href="abc" >...< /A >

Lien vers l'ancre abc.



Code pour insérer des images


< IMG src="xyz.gif" >

< IMG src="xyz.jpg >

Insertion d'une image au format gif ou jpg

 

< IMG ... width=a height=b >

Image affiché dans un cadre de a * b pixels

< IMG ... border=b >

Affichage d'une bordure

< IMG ... alt="votre texte" >

Texte alternatif. Affiché avec le cadre de l'image lors de son chargement, ou quand l'internaute positionne sa souris sur l'image

< IMG ... align=bottom >

< IMG ... align=middle >

< IMG ... align=top >

< IMG ... align=left >

< IMG ... align=right >

Aligne l'image en bas

Aligne l'image au milieu

Aligne l'image en haut

Aligne l'image à gaughe

Aligne l'image à droite

< IMG ... hspace=e >

< IMG ... vspace=f >

Détermine un espacement horizontal entre l'image et le texte

Détermine un espacement vertical entre l'image et le texte



Code pour construire des tableaux


< TABLE >...< /TABLE >

Définition d'un tableau

< TABLE width="x%" >< /td >

Largeur du tableau en %

< TABLE width=x >

Largeur du tableau en pixels

< TABLE border=x >

Largeur de la bordure

< TABLE cellpadding=x>

Espace entre la bordure et le texte

< TABLE cellspacing=x >

Epaisseur du trait entre les cellules

< TR >...< /TR >

Ligne du tableau

< TD>...< /TD >

Cellule du tableau

< TD bgcolor="#XXXXXX">

Couleur d'une cellule de tableau

< TD width="x%" >

< TD width=x >

Largeur de colonne en %

Largeur de colonne en pixels

< TD align=center >

< TD align=left >

< TD align=right >

Texte dans la cellule centré

Texte dans la cellule aligné à gauche

Texte dans la cellule aligné à droite

< TD valign=bottom >

< TD valign=middle >

< TD valign=top >

Alignement vers le bas du contenu d'une cellule

Centrage vertical du contenu d'une cellule

Alignement vers le haut du contenu d'une cellule

< TD colspan=x >

< TD rowspan=x >

Nombre de cellules à fusionner horizontalement

Nombre de cellules à fusionner verticalement