Vous êtes sur la page 1sur 8

Programmation Web

Chapitre 2. Le Langage HTML


N. Chenfour

Eléments de Marquage
ou Balises ou Tags Description
et Attributs possibles
<HTML> …</HTML> Indique le début et la fin du proogramme HTML. Tout le programme se
trouve entre <HTML> et </HTML>
<BODY> … </BODY> Corps du programme proprement dit, qui correspond à la page Web
affichée par le browser.
BACKGROUND = "image"
Exemple :
BGPROPERTIES = "FIXED" <BODY TEXT="#FF0000" BACKGROUND="back.gif">
TEXT = "couleur de texte" …
BGCOLOR = "couleur de fond" </BODY>
LINK = "couleur des liens"
ALINK = "couleur des liens
Sélectionnés"
VLINK = "couleur des liens
visités"
<HEAD> … </HEAD> Partie optionnelle du programme HTML qui contient des informations
relatives au document devant être affiché au début de la page. Elle peut
aussi comporter l’élément <TITLE>
<TITLE> … </TITLE> Permet d’indiquer le titre du document qui sera affiché dans la barre de
titre de la fenêtre du document. Par défaut (si on n’utilise pas Title)
c’est le nom et chemin du fichier ouvert qui est affiché.
Exemple :
<HTML>
<HEAD>
<TITLE> Document N° 1 </TITLE>
</HEAD>
<BODY>
texte…
</BODY>
</HTML>

Style du texte :
<H1>…</H1> en général : Permet d’écrire un titre de niveau 1, 2 … ou 6
<Hn>…</Hn> avec n=1..6 L’attribut ALIGN est optionnel et est utilisé pour aligner le titre.
ALIGN = ("center", "left", Exemple :
"right", "justify") <H1 ALIGN = "center"> Titre N° 1 </H1>

Balises HTML, N. Chenfour 1


<STRONG>…</STRONG> Texte en Gras
ou <B>… </B>
<EM>…</EM> ou Texte Italique
<I>..</I>
<U>..</U> Texte Souligné
<BIG>..</BIG> Texte avec gros caractères
<SMALL>..</SMALL> Texte avec petits caractères
<SUP>..</SUP> Texte en exposant
<SUB>..</SUB> Texte en indice
<STRIKE>..</STRIKE> Texte barré
<TT>..</TT> Te xt e a e s p ac e m e nt e n tr e l es c a r ac t èr e s f ix e e t u n pe u t p l us
gr a nd c om m e c el u i - ci .
<FONT> … </FONT> Modifie la fonte du texte au milieu sans influencer sur la taille des titres
H1 à H6.
COLOR = "#RRVVBB"
Exemple :
SIZE = ("+valeur", "-valeur")
<FONT COLOR = "#FF0000"> Texte en rouge </FONT>
<MARQUEE>…</MARQUEE> Texte défilant

Paragraphes :
<P> Nouveau paragraphe
ALIGN = ("center", "left",
"right", "justify")
<BR> Aller à la ligne
<HR> Tracer une ligne horizontale centrée par défaut et avec un effet de
profondeur (avec NOSHADE on peut éliminer cet effet.
SIZE = "valeur"
Exemples :
WIDTH = (valeur, valeur%)
<HR>
ALIGN = (left, right, center)
<HR SIZE=5 WIDTH=200 ALIGN=left>
NOSHADE
(les valeurs sont en nombre de pixels)
<HR WIDTH=50% NOSHADE>

( une ligne sans ombre sur 50% de la fenêtre)


<PRE>…</PRE> Affichage du texte préformaté. Sans changement, tel qu’il est introduit.
<CENTER>…</CENTER> Centrer le texte
<UL>…</UL> Début et fin d’une liste non numérotée
TYPE = (square, disc, circle)
<OL>…</OL> Début et fin d’une liste ordonnée (numérotée)
TYPE = (A, a, I, i, 1)

Balises HTML, N. Chenfour 2


<LI> Option (ou élément) d’une liste.
Exemple :
<UL>
<LI> Option 1
<LI> Option 2
</UL>

Liens :
<A HREF="URL"> Insertion d’un lien Hypertexte. Avec "URL" indique le chemin ou
l’adresse du fichier à ouvrir lorsqu’on clique sur le texte : Hypertexte.
Hypertexte </A>
Exemples :
TARGET = "BLANK"
<A HREF= "lien01.htm"> Lien N° 1 </A>
 Nouvelle fenêtre d’un
<A HREF= "lien02.htm" TARGET="BLANK">
nouveau Browser
Lien sur fenêtre séparée
</A>
TARGET = "TOP" <A HREF="http://www.microsoft.com/page.htm">
 sur toute la surface du Lien internet </A>
Browser <A HREF="mailto:ali@caramail.com">
envoyer un courrier électronique
TARGET = "Nom de Frame" (lance, au click, l’application responsable des envoies de couriers,
</A>
 affichage sur la frame exp : microsoft outlook)
désignée par son nom Hypertexte peut aussi être une image.
Exemple :
<A HREF= "lienImage.htm">
<IMG SRC=c:\windows\images01.gif>
</A>

<IMG SRC = "nom image"> Insertion d’une image à partir du fichier image "nom image".
SRC = "nom image" Exemple :
ALIGN = (left, top, bottom, <IMG SRC = "image01.gif">

Middle, right)
WIDTH = (valeur, valeur%)
HEIGHT= (valeur, valeur%)

Balises HTML, N. Chenfour 3


<A NAME="Identificateur"> Associe l’identificateur de fragment "Identificateur" au fragment de
texte désigné. L’identificateur peut être utilisé pour faire un saut au
fragment de texte
fragment à l’aide d’un hypertexte du même document, réalisé en
</A> respectant la syntaxe suivante :
<A HREF="#Identificateur"> Hypertexte </A>
le caractère dièse (#) est obligatoire dans ce cas.
Exemple :
<A HREF="#html"> Introduction à HTML </A>

<A Name="html"> Introduction au langage HTML </A>
texte de l’introduction …

Tableaux :
<TABLE> … </TABLE> Permet d’ouvrir une zone de tableau
BORDER
BORDER = valeur
NOBORDER
BORDERCOLOR = "…"
BGCOLOR = "…"
WIDTH = "valeur%"
CELLSPACING="valeur"
CELLPADDING="valeur"
<TR> … </TR> Définir une ligne (Rangé) du Tableau
ALIGN = (left, right, center)
VALIGN = (top, Bottom,
Middle)
<TD> … </TD> Définir une cellule (de Donnée) dans une ligne du Tableau.
ALIGN = (left, right, center) Exemple 1 :
VALIGN = (top, Bottom, <TR> <TD> Cellule 1 </TD> <TD> Cellule 2 </TD> </TR>

Middle) Exemple 2 : insertion d’images dans un tableau


<TR> <TD> <IMG SRC = "image01.gif"> </TD></TR>
COLSPAN = valeur : nombre
de colonnes réunies Exemple 3 :
<TR> <TD> Cellule 1 </TD> <TD> Cellule 2 </TD> </TR>
dans la même cellule.
<TR> <TD colspan=2 ALIGN = CENTER> Fusion </TD> </TR>
ROWSPAN = valeur : nombre Cellule1 Cellule2

de lignes réunies
Fusion
dans la même cellule.
BGCOLOR = "…"

Balises HTML, N. Chenfour 4


<TH> … </TH> Définie une ligne d’entête (Header) du Tableau. Les données dans cette
rangée seront par défaut gras et centrées
ALIGN = (left, right, center)
Exemple :
VALIGN = (top, Bottom,
<TABLE BORDER>
Middle)
<TR> <TH> Colonne 1 :</TH> <TH> Colonne 2 :</TH> </TR>
COLSPAN = valeur <TR> <TD> Cel (1, 1) </TD> <TD> Cel (1, 2) </TD> </TR>
ROWSPAN = valeur <TR> <TD> Cel (2, 1) </TD> <TD> Cel (2, 2) </TD> </TR>
</TABLE>

<CAPTION>…</CAPTION> Permet de donner un titre au tableau.


ALIGN = (left, right, center)
Les Cadres ou Frames :
<FRAMESET> Permet de diviser l’écran du Browser en plusieurs fenêtres (frames),
dans chaque fenêtre est affiché une page différente. Les différentes

pages sont des fichiers html inclus par le tag <FRAME>. La partie
</FRAMESET> FRAMESET n’est pas incluse dans <body> …</body> mais elle le
COLS = "v1,v2,…" remplace. Elle se trouve alors, en général, juste après l’entête <head>
…</head>.
ROWS = "v1,v2,…"
L’attribut COLS précise que l’écran est divisé en colonnes, et indique la
FRAMEBORDER = valeur largeur de chacune séparées par des virgules. Le symbole * peut être
Au moins valeur = 1 pour utilisé comme dernière valeur pour indiquer la largeur restante.
autoriser le redimensionnement L’attribut ROWS indique que l’écran est divisé en cellules horizontales.
<FRAME SRC = "URL"> Caractérise un cadre de la partie FRAMESET. La place de l’élément
SRC = "URL" FRAME est donc dans <FRAMESET> …</FRAMESET>
NAME = "nom du cadre" Exemple :
<HTML>
SCROLLING = ("yes", "no")
<HEAD><TITLE> fenêtre à 2 cadres </TITLE></HEAD>
MARGINWIDTH = valeur
<FRAMESET COLS = "200,*">
MARGINHEIGHT = valeur <FRAME SRC = "page_1.htm">
FRAMEBORDER = valeur <FRAME SRC = "page_2.htm">
NORESIZE </FRAMESET>
</HTML>

Balises HTML, N. Chenfour 5


<NOFRAME> Cette partie peut être aussi incluse dans la partie FRAMESET. Elle est
exécutée en alternative par les browsers qui n’arrive pas à gérer les

frames. En général, on met dans cette partie le corps <body> …
</NOFAME> </body>.
Exemple :
<HTML>
<HEAD><TITLE> fenêtre à 2 cadres </TITLE></HEAD>
<FRAMESET COLS = "200,*">
<FRAME SRC = "page_1.htm">
<FRAME SRC = "page_2.htm">
<NOFRAME>
<BODY>
Cette page web utilise deux cadres,
mais votre browser ne s'en accommode pas.
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>

Balises HTML, N. Chenfour 6


Les Formulaires :
<FORM> … </FORM> Permet de construire une fiche interactive que l’utilisateur peut remplir
et envoyer au serveur qui traite les informations qui y figurent. A
ACTION = "chemin ou URL"
l’intérieur du formulaire, on peut insérer des Champ de Saisie, des
METHOD = (GET, POST) boutons, des Cases à Cocher, des Boutons d’option et des Listes
Combinées.

<INPUT TYPE = ? > … <input name="Name" type="text" value=""><br>


</INPUT> <input name="Name" type="hidden" value="">Hidden<br>
<input name="Name" type="password" value="">
TYPE = RADIO
<input name="Name" type="radio" value="" checked><br>
TYPE = CHECKBOX
<input name="Name" type="checkbox" value="ON"><br>
TYPE = SUBMIT <input name="Fichier" type="file" size=80><br>
TYPE = TEXT <input name="sub" type="image" src="image.gif"><br>
TYPE = PASSWORD <textarea name="Name" rows=5 cols=20 wrap="off">
TYPE = HIDDEN </textarea><br>
<input type="submit" value="Send"><br>
TYPE = IMAGE
<select name="Name" size="1">
Button
<option value="value1">Item1</option>
NAME = "nom du contrôle" <option value="value2">Item2</option>
VALUE = </select>
CHECKED
Contient des Options
<SELECT>…</SELECT>
NAME = "nom du contrôle"
<OPTION> …
SELECTED
<TEXTAREA>…
</TEXTAREA>
NAME = "nom du contrôle"
ROWS =
COLS =
noplace / alert <A HREF="noplace" onMouseover="alert(’click impossible’)">
secret
</A>

Balises HTML, N. Chenfour 7


Notes :
1. SGML : Standard Generalized Markup Language. Langage de base pour la plus part des
autres langages de marquage.
2. HTML : HyperText Markup Laguages. Issu de SGML.
3. VRML : Virtual Reality Modeling Language. Issu de SGML.
4. Pour insérer un commentaire on utilise : <!-- commentaire -->
5. Caractères Spéciaux : certains caractères sont considéré comme des caractères spéciaux en
HTML (<, >, &, "). Pour les afficher comme des caractères normaux on doit les référencer
de la manière suivantes :
< &lt; ou &#60;
> &gt; ou &#62;
& &amp; ou &#38;
" &quot; ou &#34;

Balises HTML, N. Chenfour 8

Vous aimerez peut-être aussi