Professional Documents
Culture Documents
2010/2011
Bureautique et Web
Chapitre 6
Le langage HTML
Introduction
HTML, veut dire : HyperTextMarkupLangage (ou langage hypertexte et balises )
Cest un des langages d'criture utilis pour crer des pages web.
Hypertexte : c'est simple, ce mot dsigne la capacit crer des liens ( quand on
clique sur un mot, cette action vous conduit un autre texte ( d'o hyperTEXTE ) : ce
systme de navigation est omniprsent sur internet.
HTML est compos de balises (ou tags, ce sont les informations contenues entre les
signes < et >) qui servent mettre en forme la page. Les balises peuvent tre crites
en majuscules ou en minuscules. Le dbut et la fin du document HTML sont indiqus
par les balises <html> et </html>, qui sont toujours la premire et la dernire balise
(sauf si la premire est un !DOCTYPE, auquel cas <html> est la deuxime ...). Dans
les balises peuvent tre placs des attributs, c'est dire des prcisions sur la taille, les
couleurs, le style de chaque lment. Les balises de la forme </balise> sont des
balises de fermeture. Les balises de fermeture ne reprennent jamais les attributs de
leur balise d'ouverture.
Les balises de fermeture sont souvent obligatoires, et il est conseill de les mettre
chaque fois que cela est possible.
Pour visualiser le code source des pages web il suffit de vous positionner sur la page
dsire ensuite cliquez avec la touche droite de votre souris et slectionner afficher la
source.
1re anne ST
2010/2011
Bureautique et Web
exemple :
<html>
<!--dbut de votre page HTML-->
<head>
<!--votre en-tte-->
<title>Titre de votre site</title>
</head>
<!--fermeture de l'en-tte-->
1re anne ST
2010/2011
Bureautique et Web
<body>
<!--dbut du corp de votre page-->
Je viens de crer ma premire page !
<!--taper votre texte-->
</body>
<!--fermeture du corp de votre page-->
</html>
<!--fermeture de votre fichier HTML-->
Cette exemple nous donnerais pour l'internaute:
Je viens de crer ma premire page !
exemple :
<html>
<!--dbut de votre page HTML-->
<head>
<!--votre en-tte-->
<title>Titre de votre site</title>
</head>
<!--fermeture de l'en-tte-->
<body>
<!--dbut du corp de votre page-->
Je viens de crer ma premire page !
<!--taper votre texte-->
</body>
<!--fermeture du corp de votre page-->
</html>
<!--fermeture de votre fichier HTML-->
1re anne ST
2010/2011
Bureautique et Web
leftmargin et topmargin :
L'attribut est : leftmargin="nbre de pixels"
Exemple : <body leftmargin="0"> Pour dfinir les marges du texte - toujours pour
un document entier - nous nous servons de l'attribut leftmargin pour la marge
gauche et de topmargin pour la marge en haut de la page. Les valeurs sont exprimes
en pixels.
1re anne ST
2010/2011
Bureautique et Web
1re anne ST
2010/2011
Bureautique et Web
</font>
La rgle : <font color="#0000ff">Votre Texte en Couleur</font>
Exemple : Votre Texte en Couleur
Width et Size peuvent tre exprim en % de la page, la rgle est par exemple "width =
10%"
1re anne ST
2010/2011
Bureautique et Web
Titre H1
<h2>Titre H2</h2>
Titre H2
<h3>Titre H3</h3>
Titre H3
<h4>Titre H4</h4>
Titre H4
<h5>Titre H5</h5>
Titre H5
<h6>Titre H6</h6>
Titre H6
Listes
Listes puces:
texte 1
texte 2
code source :
<UL><LI> texte 1 </LI><LI> texte 2 </LI></UL>
remarques utiles :
<UL> peut prendre d'autres arguments, que voici:
<UL TYPE=disc>
<UL TYPE=circle>
<UL TYPE=square>
Ceci change le type de puce devant chaque item.
Listes numrotes :
1re anne ST
2010/2011
Bureautique et Web
1. texte 1
2. texte 2
code source :
<OL> <LI> texte 1 </LI><LI> texte 2 </LI> </OL>
remarques utiles :
<OL> peut prendre d'autres arguments, que voici:
<OL TYPE=i> Numrotation du type i,ii,iii...
<OL TYPE=I> Numrotation du type I, II, III, IV...
<OL TYPE=A> Numrotation du type A, B, C, D...
<OL TYPE=a> Numrotation du type a, b, c, d...
<OL START=5> Numrotation du type 5, 6, 7, 8...
Liste de dfinition :
Terme 1 dfinir
Dfinition du terme 1
Terme 2 dfinir
Dfinition du terme 2
suite du terme 2
code source :
<DL>
<DT>Terme 1 dfinir</DT>
<DD>Dfinition du terme 1</DD>
<DT>Terme 2 dfinir</DT>
<DD>Dfinition du terme 2</DD>
<DD>suite du terme 2</DD>
</DL>
1re anne ST
2010/2011
Bureautique et Web
Linsertion d'images
Le type d'images admises sur internet :
Les images pouvant tre affiches sur les pages web sont les images gif, jpg, bmp, et
png. A noter que seul les gif et les jpeg assurent une compatibilit avec les vieux
navigateurs. Quelques conseils pour choisir le format adapt : les images jpeg sont
plus adaptes pour les photos (elles permettent l'affichage de beaucoup plus de
couleurs que les gifs). Les gif sont mieux adaptes pour les dessins (elles sont
beaucoup moins lourdes) de plus elles permettent l'affichage d'images animes.
La balise <img> et l'attribut src
En HTML, les images sont dfinies avec le tag <img>.
Ce tag est vide, ce qui signifie qu'il n'est pas ferm et qu'il contient uniquement des
attributs.
Pour afficher une image sur une page, vous devez utiliser l'attribut src qui veut dire
source.
La valeur de l'attribut src correspond l'adresse (relative ou absolue) de l'image
souhaite.
L'image sera ainsi place l'endroit o vous insrez le tag.
1re anne ST
2010/2011
Bureautique et Web
4.-L'attribut alt :
Cet attribut est utilis pour afficher un texte descriptif de l'image qui apparat lors du
survol de celle-ci.
La valeur de cet attribut est donc un texte que vous pouvez choisir librement.
1re anne ST
2010/2011
Bureautique et Web
5.- Insrer une image d'arrire plan dans vos pages (attribut
background) :
Exemple :
<html>
<body background="background.jpg">
</body>
</html>
Liens
lien interne :
Un lien interne est utilis lorsque la hauteur de votre page est pus grande que celle de
l'cran. Pour crer un lien interne il faut placer un ancre dans le document ( l'endroit
o vous dsirez aller sur la page).
<A NAME="#nom_ancre"></A>
Pour aller vers l'ancre il suffit d'crire dans un autre endroit de votre page.
<A HREF="#nom_ancre">vers ancre</A>
lien externe: :
aller vers une autre page dans le mme rpertoire: <A HREF="tableaux.html"
target="_self">vers tableaux </A> l'attribut target permet d'aller sur la mme page
target="_self", sur une nouvelle page target="_blank" vers un autre frame
target="nom_frame" (voir chapitre frames).
1re anne ST
2010/2011
vers tableaux
vers tableaux
Bureautique et Web
Crystal music
Les liens extrrieurs peuvent tre du WWW ( http: ), FTP ( ftp: ), adresse
lectronique ( mailto: ), GOPHER ( gopher: ),newsgroup ( news: ),TELNET
( telnet: ), etc...
exemple mailto :
<A HREF="mailto:test@skynet.be">envoyez nous un e-mail</A>
envoyez nous un e-mail
Tableaux
C'est la meilleure faon de grer convenablement la prsentation.
Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones
avec des
objets (textes, images, couleurs), permettant un contrle amlior de la position des
objets.
Ces tables peuvent avoir un fond et des bords visibles ou non.
Insrer un tableau
1re anne ST
2010/2011
Bureautique et Web
<CENTER>
<TABLE WIDTH=50% border="1">
<TR>
<TD><IMGSRC="film.gif"></TD>
<TD>Bienvenue</TD>
</TR>
</TABLE>
</CENTER>
Ce tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la
premire cellule l'image et dans la seconde le texte, le tout tant centr.
1re anne ST
2010/2011
Bureautique et Web
<table border=1>
<tr>
<td>Cellule 1</td>
<td colspan=2>2 cellules fusionnes (sur la mme ligne)</td>
</tr>
<tr>
<td>Cellule 2</td>
<td>Cellule 3</td>
<td rowspan=2>2 cellules fusionnes (sur la mme colonne)</td>
</tr>
<tr>
<td>Cellule 4</td>
<td>Cellule 5</td>
1re anne ST
2010/2011
</tr>
</table>
Bureautique et Web