Vous êtes sur la page 1sur 6

OFFICE DE LA FORMATION PROFESSIONNELLE

ET DE LA PROMOTION DE TRAVAIL

Filière : TDI202
Module : DEVELOPPEMENT WEB COTE CLIENT
BALISES DE BASE DU LANGAGE HTML

GÉNÉRAL
Racine de document <HTML></HTML> (au début et à la fin du document)
Titre <TITLE></TITLE> (nom du fichier ; doit être dans l'en-tête)
En-tête <HEAD></HEAD> (titre de description)
Corps <BODY></BODY> (corps du document)

DÉFINITION STRUCTURALE
Division <DIV></DIV>
Division alignée <DIV
ALIGN=LEFT|CENTER|RIGHT|JUSTIFY></DIV>
En-tête de page <HEADER></HEADER>
Barre de navigation <NAV></NAV>
A côté de la page <ASIDE></ASIDE>
zone principale pour le contenu <ARTICLE><ARTICLE>
pied de page <FOOTER></FOOTER>
Balise inline <SPAN></SPAN>

FORMATTAGE DU TEXTE
Titres <H?></H?> (6 niveaux de titres)
Titres alignée <H?
ALIGN=LEFT|CENTER|RIGHT></H?>
Bloc en retrait <BLOCKQUOTE></BLOCKQUOTE>
Citation <CITE></CITE> (habituellement en italique)
Emphase <EM></EM> (habituellement présenté en
italique)
Forte emphase <STRONG></STRONG> (habituellement présenté en
gras)
Code <CODE></CODE> (pour l'affichage de fichier de
programmation)
Échantillon de sortie <SAMP></SAMP>
Entrée au clavier <KBD></KBD>
Variable <VAR></VAR> Une équation simple :

<var>x</var> = <var>y</var>
+2
Définition <DFN></DFN> (non officiel)

1
Adresse de l'auteur(e) <ADDRESS></ADDRESS>
Grande police de caractères <BIG></BIG>
Petite police de caractères <SMALL></SMALL>
Gras <B></B> (<strong></strong>)

Italique <I></I>
Souligné <U></U> (non officiel)
Rayé <STRIKE></STRIKE> (non officiel)
Rayé <S></S> (non officiel)
Indice <SUB></SUB>
Exposant <SUP></SUP>
Préformaté <PRE></PRE> (affiche le texte dans son
format original)
Largeur <PRE WIDTH=?></PRE> (s'applique aux caractères)
Centré <CENTER></CENTER> (pour le texte et les images)
Grandeur de la police <FONT SIZE=?></FONT>
Changement de la grandeur <FONTSIZE=+|-?></FONT>
de la police
Couleur de la police <FONT COLOR="#$$$$$$"></FONT> Exemple : Arial, Tahoma..
Sélection de fonte <FONT FACE="***"></FONT>

SÉPARATEURS

Paragraphe <P></P>
Alignement du texte <P ALIGN=LEFT|CENTER|RIGHT></P> (double retour)
Fin de ligne <BR> (simple retour)
Alignement forcé <BR CLEAR=LEFT|RIGHT|ALL>
Ligne horizontale <HR>
Alignement <HR ALIGN=LEFT|RIGHT|CENTER>
Épaisseur <HR SIZE=?> (en pixels)
Largeur <HR WIDTH=?> (en pixels)
Largeur <HR WIDTH=%> (en tant que pourcentage de la
largeur de la page)
Ligne pleine <HR NOSHADE> (sans l'effet 3D)
Sans-coupure <NOBR></NOBR> (prévient la coupure des lignes)
Coupure de mot <WBR> (endroit où couper une ligne si
nécessaire)

LISTES
Liste non-ordonnée <UL><LI></UL> (<LI> avant chaque item de la liste)

2/6
Type d'indicateur <UL TYPE=DISC|CIRCLE|SQUARE> (pour la liste entière)
<LI TYPE=DISC|CIRCLE|SQUARE> (celui-ci & subséquent)
Liste ordonnée <OL><LI></OL> (<LI> avant chaque item de la liste)
Type de nombres <OL TYPE=A|a|I|i|1> (pour la liste entière)
<LI TYPE=A|a|I|i|1> (celui-ci & subséquent)
Nombre de départ <OL START=?> (pour la liste entière)
<LI VALUE=?> (celui-ci & subséquent)
Liste de définitions <DL><DT><DD></DL> (<DT>=terme, <DD>=définition)

LIENS ET IMAGES
Lier quelque chose <A HREF="URL"></A>
Lier un pointeur <A HREF="URL#***"></A> (si c'est dans un autre
document)
<A HREF="#***">< /A> (si c'est dans le même
document)
Fenêtre cible <A HREF="URL" TARGET="***|
|_blank|_self|_parent|_top"></A>
Définition du <A NAME="***"></A> ou <A ID="***"></A>
pointeur
Afficher une <IMG SRC="URL">
image
Alignement <IMG
SRC="URL"ALIGN=TOP|BOTTOM|MIDDLE|LEFT|
RIGHT>
Alignement <IMG SRC="URL"
ALIGN=LEFT|RIGHT|TEXTTOP|
ABSMIDDLE|BASELINE|ABSBOTTOM>
Alternative <IMG SRC="URL" ALT="***"> (si l'image n'est pas affichée)
Carte-image <IMG SRC="URL" ISMAP> (requiert un exécutable)
Carte-image client <IMG SRC="URL" USEMAP="URL"> (requiert un exécutable)
Nom de la carte <MAP NAME="***"></MAP> (décrit la carte)
Sections de la <AREA SHAPE="RECT" COORDS=",,,"
carte HREF="URL"|NOHREF>
Dimensions <IMG SRC="URL" WIDTH="?" HEIGHT="?"> (en pixels)
Bordure <IMG SRC="URL" BORDER=?> (en pixels)
Espace <IMG SRC="URL" HSPACE=? VSPACE=?> (en pixels)
environnant

Objet encastré <EMBED SRC="URL"> (insert un objet dans la page)

3/6
Dimension de <EMBED SRC="URL" WIDTH=? HEIGHT=?>
l'objet

TABLEAUX
Définition d'un tableau <TABLE></TABLE>
Bordure du tableau <TABLE BORDER=?></TABLE>
Espace des cellules <TABLE CELLSPACING=?>
Espace de la bordure des <TABLE CELLPADDING=?>
cellules
Largeur <TABLE WIDTH=?> (en pixels)
Largeur <TABLE WIDTH=%> (pourcentage de la page)
Lignes du tableau <TR></TR>
Alignement <TR ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM>
Cellules du tableau <TD></TD> (doit apparaître à l'intérieur
des lignes d'un tableau)

Alignement <TD ALIGN=LEFT|RIGHT|CENTER


VALIGN=TOP|MIDDLE|BOTTOM>
Sans-coupure <TD NOWRAP>
Débordement d'une colonne <TD COLSPAN=?>
Débordement des lignes <TD ROWSPAN=?>
Largeur <TD WIDTH=?> (en pixels)
Largeur <TD WIDTH=%> (en pourcentage du tableau)

Couleur de cellule <TD BGCOLOR="#$$$$$$">


En-tête du tableau <TH></TH> (semblable aux données,
centré et gras)
Alignement <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM>
Sans-retour <TH NOWRAP>
Débordement de colonnes <TH COLSPAN=?>
Débordement de lignes <TH ROWSPAN=?>
Largeur <TH WIDTH=?> (en pixels)
Largeur <TH WIDTH=%> (en pourcentage du tableau)

Couleur de cellule <TH BGCOLOR="#$$$$$$">


Légende du tableau <CAPTION></CAPTION>
Alignement <CAPTION ALIGN=TOP|BOTTOM> (sur ou sous le tableau)
En-têtes du tableau <THEAD><TH></TH></THEAD>
Pied du tableau <TFOOT><TR></TR></TFOOT>

4/6
Corps du tableau <TBODY><TR></TR></TBODY>
Colonne du tableau <COL WIDTH= ? SPAN= ?
BGCOLOR= ? >
Groupe de colonnes <COLGROUP><COL><COL></COLGROUP>

ARRIÈRE-PLAN ET COULEURS
Couleur d'arrière-plan <BODY BGCOLOR="#$$$$$$"> (ordre est rouge/vert/bleu)
Texture <BODY BACKGROUND="URL">
Couleur du texte <BODY TEXT="#$$$">
Couleur des liens <BODY LINK="#$$$">
Couleur des liens visités <BODY VLINK="#$$$">
Liens actifs <BODY ALINK="#$$$">

CARACTÈRES SPÉCIAUX
code ISO &#?; (où le ? représente le code ISO8859-1)
< &lt;
> &gt;
& &amp;
" &quot;
Registered TM &reg;
Copyright &copy;
Espace &nbsp;

FORMULAIRES
Formulaire <FORM ACTION="URL" METHOD=GET|POST></FORM>
Champ d'entrée de <INPUT TYPE="TEXT| PASSWORD | CHECKBOX |RADIO
données |IMAGE|HIDDEN | SUBMIT| RESET| BUTTON | FILE | RANGE |
TIME | COLOR | IMAGE | URL |date |SEARCH| MONTH |
DATETIME | NUMBER | EMAIL | TEL -">
Nom du champ <INPUT NAME="***">
Valeur du champ <INPUT VALUE="***">
Valeur initiale <INPUT PLACEHOLDER="***"> (zones de texte, email, url, tel …)
Vérifié? <INPUT CHECKED> (boutons de vérification et
boutons radio)
Grandeur du champ <INPUT SIZE=?> (en caractères)
Longueur maximum <INPUT MAXLENGTH=?> (en caractères)
Liste de sélection <SELECT><OPTION></SELECT>
Nom d'une liste <SELECT NAME="***"></SELECT>
Nombre d'options <SELECT SIZE=?></SELECT>
Choix multiples <SELECT MULTIPLE> (permet une sélection multiple)

5/6
Option <OPTION> (items qui peuvent être
sélectionnés)
Option par défaut <OPTION SELECTED>
Grandeur de la boîte <TEXTAREA ROWS=? COLS=?>
d'entrée de données </TEXTAREA>
Nom de la boîte <TEXTAREA NAME="***">
</TEXTARE A>
"Wrap Text" <TEXTAREA
WRAP=OFF|VIRTUAL|PHYSICAL>
</TEXTAREA>
Regroupent des <FIELDSET>
éléments du formulaire
Titre d'un groupe <FIELDSET> <LEGEND> TITRE
******</LEGEND> ……….</FIELDSET>
Nom d’un élément <LABEL FOR="***">
Bouton cliquable <BUTTON></BUTTON> A l’intérieur de ces balises on
peut mettre du contenu (image,
texte, tableau …)
CADRES
Cadre en ligne <IFRAME SRC= "***"></FRAMESET> Un cadre en ligne est utilisé
pour incorporer un autre
document dans le document
HTML en cours.
Hauteur des lignes <FRAMESET ROWS=,,,></FRAMESET> (en pixels ou pourcentage)
Hauteur des lignes <FRAMESET ROWS=*></FRAMESET> (* = grandeur relative)
Largeur des colonnes <FRAMESET COLS=,,,></FRAMESET> (en pixels ou pourcentage)
Largeur des colonnes <FRAMESET COLS=*></FRAMESET> (* = grandeur relative)
Lageur de la bordure <FRAMESET BORDER=?>
Bordures <FRAMESET FRAMEBORDER="yes|no">
Couleur de la bordure <FRAMESET BORDERCOLOR="#$$$$$$">
Définition d'un cadre <FRAME> (items d'un cadre individuel)
Afficher le document <FRAME SRC="URL">
Nom du cadre <FRAME
NAME="***"|_blank|_self|_parent|_top>
Largeur de la marge <FRAME MARGINWIDTH=?> (marges à gauche et à droite)
Hauteur de la marge <FRAME MARGINHEIGHT=?> (marges en haut et en bas)
Défilement du texte <FRAME SCROLLING="YES|NO|AUTO">
Défilement du texte <FRAME NORESIZE>
Bordures <FRAME FRAMEBORDER="yes|no">
Couleur de la bordure <FRAME BORDERCOLOR="#$$$$$$">

6/6

Vous aimerez peut-être aussi