Langage HTML

M. Cherif H. ESSECT
Prsentation du langage HTML
Le HTML HyperText Mark-Up Language est un langage
dit de marquage (de structuration ou de balisage ). q g ( g )
Le rle de ce langage est de formaliser l'criture d'un
document avec des balises de formatage qui permettent document avec des balises de formatage, qui permettent
d'indiquer la faon dont doit tre prsent le document.
En 1990, HTML a t invent par Tim Berners-Lee qui, avec
son collgue Robert Cailliau, sont considrs comme
"inventeurs" du WWW inventeurs du WWW.
On appelle World Wide Web (not WWW) ou tout
simplement Web (mot anglais signifiant toile) la "toile
virtuelle" forme par les diffrents documents (appels
pages web ) lis entre eux par des hyperliens pages web ) lis entre-eux par des hyperliens.
M. Cherif H. ESSECT
Prsentation du langage HTML
Les pages web sont gnralement organises autour d'une
page d'accueil, jouant un point central dans la navigation
l'aide des liens hypertextes.
Cet ensemble cohrent de pages web lies par des liens p g p
hypertextes et articules autour d'une page d'accueil
commune est appele site web.
L'lment cl pour la navigation au sein des pages web est
le navigateur (en anglais browser), c'est--dire un logiciel
client capable de mettre en page le code source contenu client capable de mettre en page le code source contenu
dans la page HTML.
L i t l l tili Fi f I t t E l Les navigateurs les plus utiliss : Firefox, Internet Explorer,
Opera, Safari, Netscape, Google chrome.
M. Cherif H. ESSECT
Exemple de la hirarchie dun site web marchant
Page daccueil
Liens
Liens
Catgories Prsentation Promotions FA Q Contact Catgories Prsentation Promotions F.A.Q Contact
Produits Historique
Fiche Points de
vente
Paiement
M. Cherif H. ESSECT
Syntaxe dune balise
Forme simple :
<balise>.. </balise>
Balise ouvrante Balise fermante
Forme tendue :
<balise attribut1="valeur1" attribut2="valeur2"> </balise> <balise attribut1="valeur1" attribut2="valeur2">.</balise>
Balise ouvrante Balise fermante
M. Cherif H. ESSECT
Notions de balise
La balise est llment cl du langage HTML.
Le langage HTML se base sur les balises et contient plus Le langage HTML se base sur les balises et contient plus
dune centaine de balises diffrentes.
T l b li HTML d d b li d Tous les balises HTML possdent des balises douverture et
de fermeture, sauf quelques exceptions comme les balises
<br> et <img>. br et img .
Exemple : <p>Ceci est un paragraphe</p>
<nom_balise attribut1="valeur1" attribut2="valeur2
">....</nom_balise>
Exemple : <p align="left">Ceci est un paragraphe</p>
La majorit des balises HTML peuvent tre enrichies par un La majorit des balises HTML peuvent tre enrichies par un
couple dattibut/valeur.
M. Cherif H. ESSECT
Structure dun document HTML
< html > <-- Balise racine du document HTML.
< head > <-- La balise HEAD contient des informations sur le
document courant, telles que son titre, des mots-cls que les
moteurs de recherche peuvent exploiter des feuilles de style moteurs de recherche peuvent exploiter, des feuilles de style,
du code Javascript, (cette balise nest pas obligatoire).
< / head >
< body > <-- L'lment BODY encadre le corps du document, body e t O e cad e e co ps du docu e t,
ce sont les lments insrs entre ces deux balises que le
navigateur prsentera sur lcran.
< / body >
< / html >
M. Cherif H. ESSECT
Les titres en HTML
<Hn> </Hn> : Ces balises sont utilises pour afficher un
titre, les caractres du titre seront affichs en gras. Leur taille
dpendra de l'indice n, les plus gros auront la valeur de 1 et les
plus petits la valeur de 6.
H1 Titre de rang 1
H2 Tit d 2 H2 Titre de rang 2
H3 Titre de rang 3
H4 Titre de rang 4
H5 Titre de rang 5 H5 Titre de rang 5
H6 Titre de rang
Exemple : <H1 align=center> Titre1</H1>
M. Cherif H. ESSECT
Les Divisions dun document
<BR> : Retour la ligne (sans balise fermante)
<P> </P> : Nouveau paragraphe
<HR> : Ligne horizontale de sparation (sans balise
fermante)
Attribut: ALIGN : lalignement de la ligne
COLOR : Couleur de la ligne
NOSHADOW : Supprime leffet 3D
SIZE : la hauteur de la ligne SIZE : la hauteur de la ligne
WIDTH : la largeur de la ligne
M. Cherif H. ESSECT
Exemple
<HTML> <HTML>
<BODY>
<H2 ALIGN="CENTER"> Le rseau Internet </H2> <H2 ALIGN= CENTER > Le rseau Internet </H2>
<BR> Le World Wide Web est un service d'Internet.
<HR SIZE="3" WIDTH="90%" ALIGN="CENTER"> <HR SIZE= 3 WIDTH= 90% ALIGN= CENTER >
<P ALIGN="RIGHT"> Internet propose galement d'autres services comme l'E-
mail, FTP...
</P>
</BODY>
</HTML>
M. Cherif H. ESSECT
Les balises de style
<B> ... </B> : Pour crire en gras. g
<I> ... </I> : Pour crire en italique.
<U> ... </U> : Pour souligner le texte. g
<S> </S> : Pour barrer le texte
<TT> ... </TT> : Caractres de machine crire. TT ... /TT : Caractres de machine crire.
<CENTER> </CENTER> : Le texte va tre centr.
<SUB> ... </SUB> : Texte en indice <SUB> ... </SUB> : Texte en indice.
<SUP> ... </SUP> : Texte en exposant.
<FONT> </FONT> et <SPAN> </SPAN> : Ces deux balises <FONT> ... </FONT> et <SPAN> ... </SPAN> : Ces deux balises
agissent sur la police, la couleur et la taille des caractres.
M. Cherif H. ESSECT
Exemple 1
<HTML>
<BODY>
<B> Ce texte va tre affich en gras </B>
<BR> <I> Ce texte va tre affich en italique </I>
BR U C li /U <BR> <U> Ce texte va tre soulign </U>
<BR> <S> Ce texte va tre barr </S>
<BR> <TT> Ce texte va tre en caractres de M A E </TT> <BR> <TT> Ce texte va tre en caractres de M.A.E </TT>
<CENTER> Ce texte va tre centr </CENTER>
<BR> <BR> X<SUB>1</SUB><SUP>2</SUP> + 4
X<SUB>2</SUB> + 5 = 0
<BR> <B> <I> Cette quation nadmet pas de solutions
<U> dans R </U> </B> </I>
</BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 1
M. Cherif H. ESSECT
Exemple 2
<HTML>
BODY <BODY>
<H2> Dmonstration de lutilisation de la balise FONT </H2>
<FONT SIZE "3" COLOR "#000000" FACE "A i l"> N i <FONT SIZE="3" COLOR="#000000" FACE="Arial"> Noir
</FONT> <BR>
<FONT SIZE="4" COLOR="#FFFF00" FACE="Arial Black"> <FONT SIZE= 4 COLOR= #FFFF00 FACE= Arial Black >
Jaune </FONT> <BR>
<FONT SIZE=6 COLOR="#FF0000" FACE="Comic sans MS"> <FONT SIZE=6 COLOR= #FF0000 FACE= Comic sans MS >
Rouge </FONT> <BR>
</BODY> </BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 2
M. Cherif H. ESSECT
Fond de page et couleur du texte
La balise <BODY> peut recevoir plusieurs attributs qui vont permettre
de contrler la couleur du fond de la fentre du Browser, la couleur
des caractres du texte, et enfin la couleur des liens.
BGCOLOR : Couleur du fond (format RGB)
BACKGROUND : Pour insrer une image de fond (GIF, JPG)
TEXT : Couleur du texte (format RGB)
LINK : Couleur des liens non encore visits (format RGB)
VLINK : Couleur des liens visits (format RGB)
LEFTMARGIN : Marge de gauche en pixels LEFTMARGIN : Marge de gauche en pixels
TOPMARGIN : Marge du haut en pixels
M. Cherif H. ESSECT
Exemple 3
<HTML>
<BODY TEXT=#00FF00 BACKGROUND=images/bgrd gif> <BODY TEXT #00FF00 BACKGROUND images/bgrd.gif >
<H2> Dmonstration de lutilisation des attributs BODY </H2>
BR I di l i l <BR> Internet est un rseau mondial qui concerne les:
<FONT COLOR=#FFFFFF SIZE=4> Chercheurs </FONT>
<BR>
<FONT COLOR=#0000FF SIZE=4> Militaires </FONT>
<BR>
Internet concerne aussi le monde ducatif et les particuliers Internet concerne aussi le monde ducatif et les particuliers...
</BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 3
M. Cherif H. ESSECT
Les Listes
L li t t d d l t Les listes sont composes de deux lments:
1. Les ancres de type de liste (<UL> ou <OL>)
2. Les ancres ditem de liste (<LI>)
les types de liste
<UL> et </UL> : Dlimitent une liste avec puces (Unordered List).
<OL> et </OL> : Dlimitent une liste numros ou lettres (Ordered List).
M. Cherif H. ESSECT
Exemple
HTML <HTML>
<BODY>
<OL type="A" start="3">
<LI> Pommes </LI>
<LI> Melon </LI>
</OL>
<UL type=disc">
<LI> Pommes </LI>
<LI> Melon </LI>
</UL> </UL>
</BODY>
</HTML>
M. Cherif H. ESSECT
Les Tableaux
<TABLE> et </TABLE> : Dfinition dun tableau.
<TD> t <TD> U C ll l d t bl <TD> et <TD> : Une Cellule du tableau.
<TR> et </TR> : Une ligne du tableau.
<TH> et </TH> : Une Cellule En-tte du tableau (gras et centr).
<CAPTION> et </CAPTION> : Titre du tableau.
M. Cherif H. ESSECT
Les Tableaux
Les tableaux sont extrmement utiles en HTML : ils servent tout d'abord,
videmment, retranscrire les tableaux classiques (comme par exemple des
rsultats d'expriences ou des listings). su a s d e p e ces ou des s gs)
Leur relle utilit provient du fait que le HTML ne prvoit pas, initialement, de
mise en page. En crant un tableau dont les bords sont invisibles, on arrive
ainsi rgler la disposition des diffrents lments composant la page. ainsi rgler la disposition des diffrents lments composant la page.
On dfinit le tableau dans l'ordre suivant :
on dclare le tableau : <table>
on dclare la premire ligne : <tr> on dclare la premire ligne : <tr>
on dclare, une par une, les cellules de la premire ligne :
en les ouvrant par la balise <td>
en les fermant par la balise </td> en les fermant par la balise </td>
on conclut la ligne : </tr>
on rpte les oprations autant de fois qu'il y a de lignes
on conclut le tableau : on conclut le tableau :
La balise <TH> est identique la balise <TD> sauf que le texte de la cellule
sera considr comme du texte den-tte. Ce texte est automatiquement
centr et est mis en caractres gras. g
M. Cherif H. ESSECT
Les Tableaux
Bordure de cadre dun tableau :
<TABLE border= "?">.</TABLE>
<TABLE border="2">
<TR> <TR>
<TD>1</TD>
<TD>2</TD>
</TR> </TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
M. Cherif H. ESSECT
Les Tableaux
L'espace entre les cellules ou l'paisseur des lignes du quadrillage :
<TABLE cellspacing= "?">.</TABLE>
La largeur et la hauteur du tableau :
<TABLE width="?" height="?">..</TABLE>
<TABLE border="2" cellspacing= "10">
<TR>
<TD>1</TD> TD 1 /TD
<TD>2</TD>
</TR>
<TR> <TR>
<TD>3</TD>
<TD>4</TD>
</TR> </TR>
</TABLE>
M. Cherif H. ESSECT
Les Tableaux
L'enrobage des cellules ou l'espace entre le bord et le contenu
<TABLE cellpadding="?">.</TABLE>
<TABLE border="2" cellpadding="10"> <TABLE border= 2 cellpadding= 10 >
<TR>
<TD>1</TD>
<TD>2</TD> <TD>2</TD>
</TR>
<TR>
<TD>3</TD>
<TD>4</TD>
</TR>
</TABLE>
M. Cherif H. ESSECT
Les Tableaux
Conception dun tableau centr dune seule ligne et 3 colonnes, occupant 60% de la
largeur de la fentre :
<CENTER>
<TABLE width="60%"border="1">
<TR>
<TD width="300px">cellule1</TD>
<TD width="180px">cel 2</TD> p
<TD width="70px">3</TD>
</TR>
</TABLE>
</CENTER>
Conception dun tableau centr dune seule ligne et 3 colonnes de largeur gale :
<CENTER>
<TABLE border="1">
<TR>
<TD width="33%">cellule1</TD>
<TD width="33%">cel. 2</TD>
<TD width="34%">3</TD>
</TR>
</TABLE>
</CENTER>
M. Cherif H. ESSECT
Conception dun tableau centr avec la fusion horizontale de 3 cellules
Les Tableaux
p
<CENTER>
<TABLE border="1" width="300px">
<TR>
<TD colspan="3">cellule 1</TD> <TD colspan= 3 >cellule 1</TD>
</TR>
<TR>
<TD>cellule 1</TD>
<TD>cel 2</TD> <TD>cel 2</TD>
<TD>3</TD>
</TR>
</TABLE>
</CENTER> </CENTER>
<CENTER>
Conception dun tableau centr avec la fusion verticale de 1 cellules
<TABLE height="80px" border="1">
<TR>
<TD rowspan="2">cellule 1</TD>
<TD>cel 2</TD>
<TD>3</TD>
</TR>
<TR>
<TD>cel 2</TD>
<TD>3</TD>
</TR></TABLE></CENTER>
M. Cherif H. ESSECT
Exemple 1
<HTML>
<BODY>
<TABLE WIDTH="90%" BORDER="3">
<CAPTION> <B> Types de Donnes </B> </CAPTION>
<TR> <TH WIDTH="20%"> Type </TH>
<TH WIDTH="80%"> Informations </TH>
</TR>
<TR> <TD WIDTH="20%"> Integer </TD>
<TD WIDTH="80%" ALIGN="CENTER"> Ce type <TD WIDTH= 80% ALIGN= CENTER > Ce type
reprsente les valeurs comprises entre -32767 et 32768 </TD>
</TR>
</TABLE>
</BODY>
</HTML> </HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 1
M. Cherif H. ESSECT
Exemple 2
<HTML>
<BODY> <BODY>
<TABLE WIDTH="90%" BORDER="3">
<CAPTION> <B> Liste des Enseignants </B> </CAPTION> g
<TR> <TH WIDTH="20%"> Spcialit </TH>
<TH WIDTH="80%"> Nom-Prnom </TH>
</TR>
<TR> <TD WIDTH="20%"> Informatique </TD>
<TD WIDTH="80%" ALIGN="CENTER"> Habib Tounsi </TD>
</TR>
</TABLE> </TABLE>
</BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 2
M. Cherif H. ESSECT
Les images
<IMG> : Cette balise est toujours complte par le nom de la source
avec lun des attributs suivants :
SRC : Chemin de limage.
Border : Bordure de limage. Border : Bordure de l image.
Width : Largeur de limage.
Height : Hauteur de limage. Height : Hauteur de l image.
Align : Alignement de limage.
Title : Texte alternatif de limage. Title : Texte alternatif de l image.
Alt : Texte daide de limage (texte qui apparat dans linfo-bulle lors
du survol de limage).
La balise <img> est sans balise fermante.
M. Cherif H. ESSECT
Les images
L'attribut align positionne l'image par rapport au texte :
<IMG SRC="HELP.gif" align= "TOP">Fichier d'aide
<IMG SRC="HELP.gif" align= middle">Fichier d'aide
<IMG SRC="HELP.gif" align= "BOTTOM">Fichier d'aide
Image et lien: <A HREF=maVille.html"><IMG SRC="STAQUET.gif"></A>
M. Cherif H. ESSECT
Exemple
<HTML>
<BODY>
<H2> Inclusion dune image </H2>
<IMG SRC=images/img.gif ALT=Cest une image> IMG SRC images/img.gif ALT C est une image
<H2> Inclusion dune squence vido </H2>
<IMG DYNSRC=images/clk avi START=MOUSEOVER <IMG DYNSRC= images/clk.avi START= MOUSEOVER
LOOP=INFINITE CONTROLS>
H2 I l i d i /H2 <H2> Inclusion dune musique </H2>
<BGSOUND SRC=son/msq.wav LOOP=3>
</BODY>
</HTML>
M. Cherif H. ESSECT
Les liens hypertextes
On distingue 4 types de liens :
Lien Interne : On fait rfrence une partie se trouvant dans
le mme document.
Lien Externe : On fait rfrence un autre document.
Lien Excutable : On fait rfrence un programme
excutable ou un service de lInternet (FTP, E-Mail).
Lien Externe Interne : On fait rfrence, dans ce cas, un
point prcis dun autre fichier HTML.
M. Cherif H. ESSECT
Les liens hypertextes
L attribut HREF peut pointer vers :
Un lien externe : Il sagit de crer un lien vers un document HTML Un lien externe : Il s agit de crer un lien vers un document HTML
ou vers un serveur situ quelque part sur Internet.
Un lien interne : Dans ce cas on se propose de mettre un lien Un lien interne : Dans ce cas on se propose de mettre un lien
hypertexte vers un point prcis du fichier en cours dexcution.
Un point spcifique dun lien externe (int/ext) : On fait rfrence Un point spcifique d un lien externe (int/ext) : On fait rfrence,
dans ce cas, un point prcis dun autre fichier HTML.
Lorsque la balise <A> comporte les deux attributs HREF et NAME en
mme temps elle est considre comme ancre de dpart pour un mme temps, elle est considre comme ancre de dpart pour un
nouveau document HTML et ancre darrive dun autre lien.
M. Cherif H. ESSECT
Dfinition dune Ancre
<A...> ... </A> : La balise <A> ne sera jamais utilise seule.
Elle comporte toujours lattribut HREF,NAME
Lattribut HREF, ancre de dpart , p
Vers un lien interne : <A HREF="#etiq"> Zone cliquable </A>
Vers un lien externe : <A HREF="url"> Zone cliquable </A> Vers un lien externe : <A HREF= url > Zone cliquable </A>
Vers un lien int/ext : <A HREF="url#etiq"> Zone cliquable </A>
Lattribut NAME, ancre darrive
<A NAME="etiq"> Texte atteindre </A> q
M. Cherif H. ESSECT
Exemple 1
<HTML>
<BODY>
<H3> Image en guise dancre </H3>
<A HREF="exp10.htm"> <IMG SRC="images/glb.gif" > </A> A HREF exp10.htm IMG SRC images/glb.gif /A
<H3> Envoi dun E-Mail </H3>
<A HREF="Mailto:webmaster@inbmi edunet tn"> Envoyer </A> <A HREF= Mailto:webmaster@inbmi.edunet.tn > Envoyer </A>
<H3> Transfert de fichiers </H3>
A HREF "FTP // d t t " T f /A <A HREF="FTP://www.edunet.tn"> Transfrer </A>
<BR>
</BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 1
M. Cherif H. ESSECT
Exemple 2
<HTML>
<BODY>
<A HREF="#aller" NAME="retour"> aller la 2me partie </A> p
<H2> Cest la premire partie du document </H2>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A HREF="#retour" NAME="aller"> aller la 1re partie </A>
<H2> Cest la deuxime partie du document </H2>
</BODY>
</HTML>
M. Cherif H. ESSECT
Rsultat de lexemple 2
M. Cherif H. ESSECT
Les couleurs en HTML
Les couleurs au niveau du HTML sont dfinies en code hxadcimial de
6 chiffres. 6 chiffres.
Les couleurs se basent sur le format RGB (Red-Green-Blue), partir
duquel nimporte quelle couleur peut tre constitue des trois couleurs
rouge, vert et bleu.
Le symble "#" doit prcd une couleur dans le code-source pour que
le HTML puisse linterprter le HTML puisse l interprter.
Les deux premiers chiffres indique la quantit en couleur rouge, les deux
suivants en couleur verte et les deux derniers en couleur bleue.
Les couleurs principales Black, White, red, blue, green, yellow) peuvent
tre utilises en HTML directement par leurs noms.
Exemple :
<Body text="#45FF00"> .. </Body> y y
<font color="red"> .. </font>
M. Cherif H. ESSECT
Remarques gnrales
Le HTML est insensible la casse (pas de distinction entre
majuscules et minuscules). majuscules et minuscules).
Le HTML est un langage anglophone (pas de termes en franais).
Un commentaire peut tre insr dans le code HTML entre <!-- et --> Un commentaire peut tre insr dans le code HTML entre <!-- et -->.
Faire attention la syntaxe des balises et de leurs attributs/valeur.
Ne jamais oublier les balises de fermeture (malgr que pas mal de Ne jamais oublier les balises de fermeture (malgr que pas mal de
navigateurs corrigent ce type de faute et affiche correctement).
Tout code HTML sur le web peut tre visualisable partir du Tout code HTML sur le web peut tre visualisable partir du
navigateur.
Lcriture dun code propre et indent est trs recommand pour un L criture d un code propre et indent est trs recommand pour un
intergrateur ou un dveloppeur Web.
M. Cherif H. ESSECT