Académique Documents
Professionnel Documents
Culture Documents
HTML FR
HTML FR
www.ccim.be/ccim328/html/index.htm
Prambule
Notre objectif dans l'laboration de cette formation consacre la cration de pages Web et donc au langage
Html a t la simplicit de l'expos et le souci de fournir des bases saines pour une tude et une utilisation plus
pousse.
Nous n'avons nullement la prtention d'tre exhaustif et d'tre "LA" rfrence. Nous savons pertinemment que
notre synthse est trs subjective et que nous ferons hurler les puristes. Nous esprons cependant vous faire
comprendre et apprcier le langage Html et vous donner l'envie d'en apprendre plus au sujet de la publication sur
Internet.
d'un browser soit Netscape Navigator (payant) que vous pouvez cependant tlcharger gratuitement
au site de Netscape (http://home.netscape.com) ou sur les CD de certains mensuels informatiques
soit Microsoft Explorer (gratuit galement) tlcharger (http://www.microsoft.com) ou dans les
revues.
2.2 Vous n'avez pas besoin:
d'tre connect pour crire, voir et peaufiner vos pages Html.
d'avoir le dernier diteur Html sans doute performant mais coteux qu'il sera toujours temps
d'adopter lorsque vous aurez us vos petits doigts sur vos premires pages. Nous pensons Claris
Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert ou Netscape Editor ainsi qu'aux
dizaines d'autres diteurs que vous rencontrerez sur le Web.
2.3 Conseils
Le langage Html tant un ensemble de balises et d'attributs, il nous parat utile sinon indispensable de les
passer en revue et surtout de les visionner au moins une fois car :
si les diteurs Html vous faciliteront grandement la tche, ils ne sont pas toujours parfaits surtout lors
des modifications, annulations ou suppressions en cours de travail. Il vous faudra bien alors vous
plonger dans le code source pour corriger les dysfonctionnements.
les codes source de vous pages prfres sont disponibles (et sans copyright). Il est alors possible de
s'en inspirer pour reprendre le procd sans avoir rinventer le monde.
ces mmes diteurs Html vous proposeront des termes comme" En-tte, Heading, Cell spacing,
Numered List..." qui sont propres au langage Html.
vous aurez besoin d'une connaissance pointue du Html pour inclure les codes du Javascript ou du
VBscript dans vos pages.
</HEAD>
<TITLE>
</TITLE>
<BODY>
</ BODY>
Vous aurez remarqu qu' chaque balise de dbut d'une action, soit <...>, correspond (en toute
logique) une balise de fin d'une action </...>.
Vous noterez aussi que les balises ne sont pas "case sensitive". Il est donc quivalent d'crire
<HTML>, <html>, <Html>, etc.
3.2 Faisons ensemble notre premier document Html:
- Ouvrir l'diteur de texte.
- Ecrire les codes Html suivants:
<HTML>
<HEAD>
<TITLE>Document Html minimum</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
- Ouvrir le navigateur.
- Afficher le document via le menu File/Open file...
- Admirer votre premier document Html.
Celui-ci est vide (et c'est normal) mais tout fait oprationnel! Il faudra maintenant lui fournir votre information
l'intrieur des balises <BODY></BODY>. Remarquez que votre "TITLE" est prsent dans la fentre de
Netscape.
Pour vos ventuelles modifications, il n'est pas ncessaire de rouvrir chaque fois le navigateur.
Retourner dans l'diteur de texte (sans fermer le navigateur).
Modifier les codes Html.
Enregistrer le fichier.
Utiliser la commande Reload du browser ou si celui-ci est paresseux cliquer dans la barre "Location"
et faire "Enter".
Chapitre 4 : Le texte
Tout document Html contiendra en majorit du texte. Voyons comment l'agrmenter par quelques balises
lmentaires.
Gras
[Bold]
Italique
[Italic]
Taille de caractre
[Font size]
Couleur de
caractre
A la ligne
Commentaires
Centrage
<B>...</B>
<STRONG>...</STRONG>
<I>...</I>
<EM>...</EM>
<FONT SIZE=?>...</FONT>
<FONT SIZE=5>texte</FONT>
<FONT COLOR="#0000FF">en bleu</FONT>
<!--C'est fini-->
</BODY>
</HTML>
- Ouvrir le browser
#0000FF
#FFFFFF
#FF0000
#C0C0C0
Vert
Violet
Jaune
Noir
#00FF00
#8000FF
#FFFF00
#000000
[Heading]
<Hn></Hn>
avec n=1 6
Liste non-ordonne [Bullet list]
<UL></UL>
Liste ordonne
[Numbered list] <OL></OL>
Elment de liste
[List items]
<LI>
Paragraphe
[Paragraph]
<P></P>
Comme d'habitude...
- On ouvre son petit diteur de texte
<H1>Les mois du printemps</H1>
<UL><LI>avril
<LI>mai
<LI>juin</UL>
<P>
<H3>Les mois d'automne</H3>
<OL><LI>octobre
<LI>novembre
<LI>décembre</OL>
- Et on ouvre son petit browser
Les 12 mois
Les mois du printemps
1. avril
<A NAME="***">...</A>
<A HREF="#***">...</A>
Plusieurs liens l'intrieur d'un mme document supposent que ce document prsente une certaine longueur sinon
une longueur certaine (et donc un temps de chargement assez long). Ainsi, on prfrera gnralement cette
technique le dcoupage d'un longue page en un ensemble de plusieurs pages de dimension plus rduite.
8.3 Commentaires :
En Html, l'image ne fait pas partie de votre document. Le browser va la chercher l'adresse indique.
Gnralement, on place les images dans le mme rpertoire que les pages Html.
Presque en consquence logique de ceci, le fait d'utiliser la mme image plusieurs reprises dans un
fichier Html ne modifie en rien sa taille.
Prvoir un texte pour les browsers n'ayant pas l'option image active, permet au lecteur de ne pas
perdre le fil de l'expos et peut-tre d'activer cette option pour dcouvrir votre oeuvre.
Il est important pour la fluidit de l'affichage de prciser la taille en hauteur et largeur de l'image car
le browser peut ainsi connaissant l'emplacement rserver pour celle-ci, continuer afficher le texte.
Cette information vous est donne par Paint Shop Pro.
8.4 L'attribut Align
L'attribut align positionne l'image par rapport au texte
<HR>
Ce tag fort simple, nous permettra de comprendre un peu mieux le fonctionnement du navigateur. D'abord, vous
avez dj dcouvert au fil de vos erreurs qu'il est plutt gentil car il s'efforce toujours d'afficher quelque chose.
Ensuite, il vous mnage le travail en prenant sa charge des valeurs par dfaut d'un certain nombre d'attributs.
Dans le cas prsent, les valeurs par dfaut de la balise <HR> sont : une paisseur de trait de 2 pixels, un
alignement centr et une largeur de 100% de la fentre. Vous pouvez trs bien modifier au gr de votre fantaisie
les valeurs de ces diffrents attributs.
<HR size=?>
<HR width=?>
<HR width="%">
<HR align=left>
<HR align=right>
<HR align=center>
Epaisseur en pixels
Largeur en pixels
Largeur en % de la fentre
Alignement gauche
Alignement droite
Alignement centr
- Commentaires :
On prfrera spcifier la largeur en % de la fentre plutt qu'en pixels car l'affichage s'adaptera ainsi
toutes les tailles et rsolutions d'cran.
On peut prfrer l'usage d'images comme sparateur (comme c'est la cas ici) pour personnaliser son
ouvrage.
<BODY BGCOLOR="#$$$$$$">
10
Joli! Mais la lisibilit n'est pas parfaite. Heureusement, des balises sont prvues pour modifier les couleurs
utilises par dfaut par le browser pour le texte et les liens.
Couleur de texte
Couleur de lien
Lien visit
Lien actif
<BODY TEXT="#$$$$$$">
<BODY LINK="#$$$$$$">
<BODY VLINK="#$$$$$$">
<BODY ALINK="#$$$$$$">
On peut aussi prvoir un fond en image. Cette image (petite de prfrence) est affiche en mosaque par le
browser. Attention aux raccords... comme lorsque vous posez du papier peint.
Texture d'arrire-plan <BODY BACKGROUND="Adresse">
Ce qui peut nous donner :
<BODY BACKGROUND="PAPER.gif">
<H1>Bonjour</H1>
</BODY>
[Table]
[Table Row]
[Table Data]
<TABLE></TABLE>
<TR></TR>
<TD></TD>
11
11.1 Un tableau deux lignes et deux colonnes, et donc quatre cellules se reprsente comme suit :
<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
[Border]
<TABLE border=?></TABLE>
<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
<TABLE cellspacing=?>
<TABLE cellpadding=?>
<TABLE width=?>
<TABLE width=%>
Construisons un exemple :
<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>
12
13
Je souhaite que la premire ligne prenne toute la largeur de la ligne. La premire cellule doit donc dborder sur 3
cellules horizontales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3>cellule 1</TD>
</TR>
<TR> <TD width=33%>cellule 1</TD> <TD width=33%>cel 2</TD>
<TD width=34%>3</TD> </TR>
</TABLE></CENTER>
Dans le mme style, je souhaite que la premire colonne prenne toute la hauteur de la colonne. La premire
cellule doit donc dborder sur 2 cellules verticales.
<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
<TR>
<TD width=33%>cel 2</TD>
<TD width=34%>3</TD>
</TR>
</TABLE></CENTER>
Maintenant, comme le disait un gardien de prison de mes connaissances, il est temps de mettre de l'ordre dans les
cellules [Je n'ai pas pu rsister...].
Ligne de tableau
Cellule de tableau
<TR align=left/center/right>
<TR valign=top/middle/bottom>
<TD align=left/center/right>
<TD valign=top/middle/bottom>
horizontalement
verticalement
horizontalement
verticalement
14
Pour terminer cette leon, il est aussi possible de changer la couleur de la cellule.
Couleur de la cellule
<TD BGCOLOR="#$$$$$$">
13.1 Il est impratif de travailler avec des exemples. Pour obtenir un agencement ainsi :
Il faut employer les balises suivantes :
<HTML>
<HEAD></HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
15
16
13.4 Pour l'instant, nos frames sont vides. On va donc leur donner manger par des attributs de la balise :
<FRAME .SRC="URL ou adresse du document afficher dans la fentre">
On construit 3 fichiers Html lmentaires que l'on place dans le mme rpertoire que le fichier de frames :
A.htm
B.htm
C.htm
<HTML><BODY>
<H4>A</H4>
</BODY></HTML>
<HTML><BODY>
<H1>B</H1>
</BODY></HTML>
<HTML><BODY>
<H1>C</H1>
</BODY></HTML>
Les ascenseurs, comme la fentre A, apparaissent automatiquement. Par l'attribut de la balise <FRAME>
SCROLLING="yes/no/auto" vous pouvez indiquer si la fentre doit ou non possder une barre de dfilement.
13.5 Un autre attribut de cette balise <FRAME> est NAME="NOM". Name indique le nom de la fentre de telle
sorte que cette frame puisse tre utilise comme cible d'un lien hypertexte.
17
Ainsi, je voudrais faire un lien sur B pour afficher le contenu de ce lien (prenons le fichier A.htm pour viter de
l'encodage) dans C .
Le fichier de frames devient :
<FRAMESET ROWS="30%,70%">
<FRAME SRC="A.htm">
<FRAMESET COLS="30%,70%">
<FRAME SRC="B.htm">
<FRAME SRC="C.htm" NAME="fenetreC">
</FRAMESET>
</FRAMESET>
Et on met un lien vers A.htm dans le fichier B.htm en dsignant comme cible la frame C.
<HTML><BODY>
<A HREF="A.htm" TARGET="fenetreC"><H1>B</H1></A>
</BODY></HTML>
L'attribut TARGET peut aussi prendre certaines valeurs prdfinies :
_blank qui indique au browser qu'il doit crer une nouvelle fentre afin d'y afficher le fichier. Dans
ce cas, vous ouvrer en fait un nouveau browser.
_self qui indique que le fichier sera charg dans la mme fentre que celle dans laquelle se trouve le
lien.
_top qui implique l'affichage du fichier sur toute la surface de la fentre du browser.
VERIFIEZ TOUJOURS VOS DIFFERENTS LIENS AVEC DES FRAMES. Vous viterez ainsi que votre beau
site ne devienne rapidement une "soupe".
13.6 Par dfaut, les cadres sont spars par des bordures. Il est possible de supprimer ces bordures mais les
attributs utiliser diffrent selon Netscape ou Internet Explorer. Netscape utilise l'attribut "border=0" et
Explorer, les attributs "frameborder=no" et "framespacing=0" (pour enlever l'espace entre les cadres). Le tout
cohabite sans problme. La balise devient alors par exemple :
<FRAMESET COLS="30%,70%" border=0 frameborder=no framespacing=0>
13.7 Il y a pour terminer la balise <NOFRAMES>...</NOFRAMES> qui est utilise pour indiquer le texte que
doivent afficher les browsers incapables de grer les frames. Il est mme indiqu de prvoir une page sans
fentres pour que ces visiteurs puissent profiter quand-mme de votre site.
18
Les diteurs Html les plus rcents sont WYSIWYG (What You See Is What You Get) ou avec
prvisualisation intgre comme votre traitement de texte. Le codage des balises Html n'apparat
donc plus. Il serait dommage de se priver de cette proprit! Gardez cependant toujours l'esprit que
cette prvisulisation n'est pas (et ne sera jamais) fidle 100% par rapport ce qui sera affich par le
browser et qu'elle ne vous empche nullement de consulter quand mme le code source.
Pourquoi un? On peut trs bien imaginer un diteur volu pour le courant et un diteur de la
premire gnration (plus proche des tags purs et durs) pour les ralisations plus pointues.
14.2. Des noms ! Des noms ... [mis jour fin 2000]
Dreamweaver
FrontPage 2000
WebExpert 4.0
"On savait faire du Html en ce temps l"... WebExpert est le seul diteur de cette
srie ne pas tre entirement "Wysiwyg" et encore prsenter les balises. Et
c'est loin d'tre inutile car on garde encore la sensation de faire du Html et non
du traitement de texte. WebExpert est un diteur complet, intelligent et
respectueux du code et de l'esprit Html. En outre ses scripts et ses aides bien
ralises dpanneront plus d'un concepteur dbutant. J'avoue avoir t un peu
perdu devant tous ses onglets et autres icnes qui se sont gnreusement ajouts
au fil des versions. WebExpert y a perdu sa simplicit d'utilisation et un peu
aussi de sa modernit. Atout matre, son prix reste trs comptitif.
Sympathique !.... Plus volu que FrontPage Express moins complexe que
FrontPage 98 ou 2000, cet diteur devrait ravir les webmestres dbutants ou plus
avancs qui cherchent faire du bon travail sur la toile sans devoir passer par
ces "usines gaz", plus performantes peut-tre mais d'une approche nettement
plus complique. Raisonnablement complet, intelligemment conu, Namo
WebEditor laisse l'impression que tout a t pens pour obtenir un maximum
d'efficacit et de convivialit. Pas "Le" meilleur srement, mais le plus
abordable assurment. Une alternative non ngligeable !!!!
Netscape Composer
19
et donc les plus usuelles fonctions du Html. J'ai par exemple toujours apprci la
ralisation des tableaux sous Netscape qui tout tant simple, permet d'avoir un
rsultat impeccable. Il faut cependant avouer qu'il ne fait plus le poids face aux
diteurs Html spcialiss, abords ci-dessus. Pour dbuter seulement...
FrontPage Express
Et autres...
Il est de bon conseil de tester les pages Web avec diffrents navigateurs (Netscape 2 et/ou 3, Explorer 3.0) et
avec diffrentes rsolutions d'cran (640/480, 800/600, 1024/768). Des surprises ne manqueront pas l'appel
(surtout avec Explorer 3.0).
Un truc tout simple est de changer votre site en construction de disque ou de rpertoire. Il n'est pas non plus
inutile de signaler les conditions optimales pour visionner votre site.
Votre page d'accueil doit tre attirante l'oeil comme l'esprit de votre lecteur. Il faut donc la soigner plus que
toutes les autres pages. Cette Homepage doit donner envie aux interlocuteurs intresss par le sujet aller plus
loin dans votre site et permettre au surfer press non concern continuer sans remords son cybervoyage.
20
Gnralement, on se contentera d'une bauche de page d'accueil durant la construction du site et on fignolera
cette premire page en dernier lieu.
On gardera l'esprit les questions suivantes :
21
- de boutons radio
22
- de cases cocher
A la suite du ou des formulaires, il y aura un bouton dont la fonction sera d'envoyer les messages (par exemple
votre adresse lectronique).
16.5 Jusqu' prsent, nous n'avons que publi des pages sur le Web. Avec Javascript et Java, nous allons
dcouvrir les lments pour programmer sur le Web.
Javascript est un ensemble de codes (scripts) directement incorpors dans Html, qui permet de faire raliser au
browser certaines fonctions dtermines. Pour autant que le navigateur le permette bien entendu (ce que font nos
deux complices, Netscape 2.0 et plus et Microsoft Explorer 3.0 [en principe pour ce dernier cependant] ).
A titre d'exemple, on peut aisment faire apparatre avec Javascript un petit message du genre "Attention!"
lorsque l'utilisateur clique sur un bouton.
Le code est assez simple :
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-function hello() {
alert("Attention!");
}
// -->
</SCRIPT>
</HEAD>
<BODY>
...<input type=button name="" value=" Pour le test " onClick="hello()">...
</BODY>
</HTML>
On peut aussi raliser en Javascript des choses plus complexes sans un long apprentissage (et sans compilateur).
De faon trs schmatique Javascript serait une version tendue de Html ou une version simplifie de Java.
Vous trouverez sur le Web des petites applications que vous pouvez modifier lgrement (en changeant le texte
par exemple) pour les inclure dans vos pages.
16.6 Java est quant lui un langage de programmation part entire dvelopp par Sun Microsystems. Il est
nettement plus lourd et compliqu que Javascript mais galement beaucoup plus puissant. Ce qui ouvre des
perpectives immenses l'volution future des pages Html.
Java est donc un langage orient objet (proche de C++) qui permet de compiler des programmes excutables
mais aussi de petites applications, indpendantes de toute plate-forme, appeles des applets. Ces applets, pourvu
que le navigateur sache les interprter, sont excutes en local sur la machine affichant le document.
Si vous ne vous sentez pas une me de programmeur. Cela ne vous empchera pas d'utiliser des applets Java.
Vous en trouverez sur le Net, avec leurs sources et paramtres. Il suffit de lancer une recherche avec comme
critre "Java Applet".
Attention Javascipt et Java peuvent faire planter le systme de votre lecteur!
23
24
25
L'auteur
Van Lancker Luc
Rue des Brasseurs, 22
7700 Mouscron
Belgique
Vanlancker.Luc@ccim.be
Du mme auteur :
Apprendre le Javascript
Apprendre le Vbscript
Matriser le langage Html
www.ccim.be/ccim328/js/index.htm
www.ccim.be/ccim328/vb/index.htm
www.ccim.be/ccim328/htmlplus/index.htm
26
Texte en gras
Agrandissement de la taille des caractres
Texte clignotant (Netscape seul)
Texte en italique
Texte en couleur o XXXXXX est une valeur hexadcimale
Taille des caractres o X est une valeur de 1 7
Texte en italique
Empche les ruptures automatiques de ligne des navigateurs
Texte prformat, soit avec affichage de tous les espaces et sauts
de ligne
Rduction de la taille des caractres
Mise en gras du texte
Texte en indice
Texte en exposant
Texte soulign
Listes
<UL>
<LI>
</UL>
<OL>
<LI>
</OL>
<DL>
<DT>...</DT>
<DD>...</DD>
</DL>
<HR>
<HR width="x%">
<HR width=x>
<HR size=x>
<HR align=center>
<HR align=left>
<HR align=right>
<HR noshade>
27
Hyperliens
<A href="http://...">...</A>
<A href="mailto:...">...</A>
<A href="fichier.htm">...</A>
<A name="xyz">...</A>
<A href="xyz">...</A>
<A href="fichier#xyz">...</A>
Images
<IMG src="xyz.gif">
<IMG src="xyz.pjg>
<IMG ... width=x height=y>
< IMG ... border=x>
<IMG ... alt="votre texte">
<IMG ... align=bottom>
<IMG ... align=middle>
<IMG ... align=top>
<IMG ... align=left>
<IMG ... align=right>
<IMG ... hspace=x>
<IMG ... vspace=y>
Tableau
<TABLE>...</TABLE>
<TABLE width="x%">
< TABLE width=x>
<TABLE border=x>
<TABLE cellpadding=x>
<TABLE cellspacing=x>
<TR>...</TR>
<TD>...</TD>
<TD bgcolor="#XXXXXX">
<TD width="x%">
<TD width=x>
<TD align=center>
<TD align=left>
<TD align=right>
<TD valign=bottom>
<TD valign=middle>
<TD valign=top>
<TD colspan=x>
<TD rowspan=x>
Frames
<FRAMESET>...</FRAMESET>
<FRAMESET rows="x%,y%,...">
<FRAMESET cols="x%,y%,...">
<FRAME src="fichier.htm">
<NOFRAMES>...</NOFRAMES>
Fichier Html
<HTML>...</HTML>
Dbut et fin de fichier Html
<HEAD>...</HEAD>
Zone d'en-tte d'un fichier Html
<TITLE>...</TITLE>
Titre affich par le browser (lment de HEAD)
<BODY>...</BODY>
Dbut et fin du corps du fichier Html
<BODY bgcolor="#XXXXXX">
Couleur d'arrire-plan (en hexadcimal)
<BODY background="xyz.gif">
Image d'arrire-plan
Apprendre le langage Html
www.ccim.be/ccim328/html/
28
‚
ƒ
„
…
†
‡
ˆ
‰
Š
‹
Œ

Ž


‘
’
“
”
•
–
—
˜
™
š
›
œ

ž
Ÿ
espace
 
¡
¢
£
¤
¥
¦
§
¨
©
ª
ENTITY
¡
¢
£
¤
¥
¦
§
¨
©
ª
«
¬
­
®
¯
°
±
²
³
´
µ
¶
·
¸
1
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
Æ
Ç
È
É
Ê
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
ENTITY
«
¬
­
®
&masr;
°
±
²
³
´
µ
¶
·
¸
¹
º
»
¼
½
¾
¿
À
Á
Â
Ã
Ä
Å
&Aelig
Ç
È
É
&Ecric;
Ë
Ì
Í
Î
Ï
Ð
Ñ
Ò
Ó
Ô
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
à
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
ENTITY
Õ
Ö
×
Ø
Ù
Ú
Û
Ü
Ý
Þ
ß
&agrace;
á
â
ã
ä
å
æ
ç
è
é
ê
ë
ì
í
î
ï
ð
ñ
ò
ó
ô
õ
ö
÷
ø
ù
ú
û
ü
ý
þ
ÿ
www.ccim.be/ccim328/html/
29