HTML

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)

<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%)

<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
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 = "…"

<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
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.

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>

<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>

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>

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 : 
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 :
< < ou <
> > ou >
& & ou &
" " ou "

Langue

HTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML

Titre original :

Transféré par

Droits d'auteur :

Formats disponibles

Programmation Web

Chapitre 2. Le Langage HTML

Balises HTML, N. Chenfour 1

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

Balises HTML, N. Chenfour 2

Balises HTML, N. Chenfour 3

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

Balises HTML, N. Chenfour 4

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

Balises HTML, N. Chenfour 5

Balises HTML, N. Chenfour 6

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

Balises HTML, N. Chenfour 7

Balises HTML, N. Chenfour 8

Centres d'intérêt liés

Vous aimerez peut-être aussi