2

Plan

Introduction au ! 1. Petit historique d’Internet

langage HTML ! 2. Généralités sur le langage HTML
! 3. Le langage en détails
Unité « Introduction à l’Informatique » ! 4. Créer une page Web
Licence 1 semestre 1
Année 2006/2007
http://jean-luc.mari.perso.esil.univmed.fr

3 4

1. Petit historique d’Internet

! Début des années 70
" ARPAnet (Advanced Research Projects Agency Network)
Réseau pour la défense américaine
" Les principes
! pas de lieu centralisé pour éviter la paralysie en cas de destruction
1. Petit historique d’Internet !
d'un point du réseau
le réseau doit fonctionner, même en cas de destruction partielle de
celui-ci
! la connexion de chaque noeud ou ordinateur à plusieurs autres
! découpage de l'information en "paquets" indépendants
! la circulation de l'information par différents chemins, de façon
sécurisée
" Première démonstration publique du réseau : oct. 1972
" En 1972 également, envoi du premier courrier électronique
par Ray Tomlinson
 5 6

1. Petit historique d’Internet 1. Petit historique d’Internet

! Au cours des années 70 ! Années 80
" L'interconnexion des réseaux est adoptée par les universités " Développement des connexions aux Etats-Unis puis en
pour : Europe, au Japon, en Océanie
! la transmission d'informations, de fichiers ! 213 machines reliées en 1981
! la communication ! 535 000 en 1991
! l'utilisation partagée de gros ordinateurs " Le réseau échappe de plus en plus aux militaires au profit
des universitaires qui le rebaptisent "Internet", abréviation de
" Création de protocoles (TCP/IP, Mail, FTP, ...) International Network
! TCP/IP : Transmission Control Protocol / Internet Protocol " Le grand public n'est pas encore là... il faut connaître le
" définition du mode de transmission de l!information langage de l!Internet !
" principe “grossier” : acheminer des données sur un réseau en les
fragmentant en petits paquets
" protocole “officiel” en 1981.

7 8

1. Petit historique d’Internet 1. Petit historique d’Internet

! Années 90 ! Années 90
" Développement des utilisations privées de l'internet
! 1989 : Tim Berners-Lee invente la navigation hypertexte
(www.w3.org) pour réorganiser les archives du CERN
! 1993 : le logiciel Mosaic adapte le concept d'hypertexte au parcours
du réseau mondial " Les autorités publiques encouragent ce développement
! Le logiciel Netscape, issu de Mosaic, popularise l'utilisation d'Internet ! 1993 : projet “d'autoroute de l'information” aux Etats Unis : 17 M$
! 1994 : Lancement de Yahoo pour la construction d'un réseau de fibres optiques
! 1998 : Lancement de Google ! 1998 : Lancement du Programme d!Action Gouvernemental pour la
Société de l!Information PAGSI (www.internet.gouv.fr)
! décembre 1999 : l'UE lance son programme e-europe
(europa.eu.int)
 9 10

1. Petit historique d’Internet 1. Petit historique d’Internet

! Années 2000 ! Internet
" 2000 Elections des représentants de l'ICANN
" Partager des données
! Noms de domaines
" Communiquer de l!information
! Adresses IP
! Numéros de ports (normalisation)
" Un premier langage pour communiquer : HTML
" 2000 : Mise en place du nouveau "portail de l'administration " Depuis 1997, HTML 4.0 standardisé par le W3C
française" (www.service-public.fr) " Aujourd!hui, nombre de pages Web recensées par Google :

" 2001 : Créations de nouveaux noms de domaines + de 18 milliards de pages !

" Recherche “HTML” sur Google
" 2001 : En France, création du Forum de l'internet
4 170 000 000 pages !
" Des chiffres ? (www.journaldunet.com)
! Aujourd!hui 319 000 000 internautes dans le monde (à domicile)
! + 1 000 000 000 qui utilisent Internet régulièrement

11 12

1. Petit historique d’Internet

! Quelques adresses sur HTML

" http://www.ccim.be/ccim328/
" http://www.ccr.jussieu.fr/urfist/html/html.htm/

2. Généralités sur le langage HTML

" http://mediatheque.ircam.fr/docs/HTML/
" http://guide.ungi.net/
" http://www.snv.jussieu.fr/archambault/cours/html/
" http://validator.w3.org/
 13 14

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! HTML, c’est quoi ? ! Quelques exemples
"« Un langage pour écrire des pages web… » Les Pages Jaunes

15 16

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! Quelques exemples ! Quelques exemples

Pour faire des recherches sur Internet Pour acheter des livres ou des CD
Google Amazon
 17 18

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! Quelques exemples ! Quelques exemples

Pour en savoir plus sur…

Un site sur les White Stripes
Pour se procurer le cours d’HTML
Ma page Web personnelle

19 20

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! Introduction ! Introduction
" HTML 1.0 fait son entrée sur Internet en Mai 1991. " HTML 4.0 est proposé le 8 Mai 1997.
" HTML 2.0 apparaît en septembre 1995... " Réputé être le standard actuel.
(les vrais débuts). " Cette version fonctionne à partir des versions 4.0 sur les 2
" HTML 3.0 apparaît le 7 Mai 1996 principaux navigateurs (Netscape et Internet Explorer). Elle
(en voie de disparition). apporte les nouveautés suivantes :
! les frames,
! les feuilles de style,
! le contrôle amélioré des tableaux,
! les formulaires optimisés,
! l’intégration normalisée des éléments multimédia,
! l’arrivée des symboles mathématiques,
! l’intégration du jeu de caractères ISO 10646.
 21 22

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! Caractéristiques
" HTML = HyperText Markup Language.
" Il repose sur le protocole HTTP (HyperText Transfert
Protocol).
" C’est un langage de définition de documents
! Ce n’est pas un langage de programmation.
" Il est interprété par tous les navigateurs.
" On l’écrit comme un simple texte ASCII.
" Il peut être employé aussi bien sur un PC, un Mac, une
console Sun, etc…
! Et donc il peut être employé sous Windows, MacOS, Unix,
Linux, Solaris…
! Il s’agit d’un langage portable.
! Caractéristiques
" En revanche, le logiciel permettant de l’interpréter dépend
du système d’exploitation.
" Ce logiciel interpréteur sera celui du navigateur (du browser,
du butineur…).
" Il peut comporter des textes, des images, des composants
multimédia (son, vidéo).
" Surtout, il permet de construire des liens (hyper-texte). Ces
liens pouvant être de plusieurs types (internes, externes
etc.).

23 24

2. Généralités sur le langage HTML 2. Généralités sur le langage HTML

! Description ! Un exemple de page
" C'est un langage à balises (tag). <html>
<head>
" La plupart d'entre elles après avoir été ouvertes nécessitent <title>Une page HTML</title>
d'être fermées. </head>
" L'ordre de fermeture doit être exactement l'ordre inverse
d'ouverture. <body>
<p>
! Comme les parenthèses d’une formule mathématique… Voici une page Web !
" Certaines reçoivent des paramètres optionnels </p>
complémentaires contenus dans la balise d'ouverture.
<div align="center">
<img src="guitare.jpg">
</div>

</body>
</html>
 25 26

3. Le langage
! 3.1. Les balises de structuration
" <HTML> …</HTML> : C'est entre ces 2 balises que va être définie votre
page HTML. Elles doivent apparaître aux deux extrémités de votre
document source.
" <HEAD> …</HEAD> : C'est entre ces 2 balises que vont être contenues

3. Le langage
des informations sur la page (le titre, l'auteur, le contenu, les mots-clés,
le jeu de caractères utilisés, etc.). On peut aussi trouver du texte qui
apparaîtra dans la page (mais, ce n'est pas courant) ainsi que des
scripts.
" <META NAME="…">
<META CONTENT="…"> : Meta information. Permet de spécifier par
exemple le nom de l’auteur du document, la date de création et de
multiples informations permettant de caractériser la page HTML.
" <!-- … --> : Commentaires.

27 28

3. Le langage 3. Le langage
! 3.1. Les balises de structuration ! 3.1. Les balises de structuration
" <TITLE> …</TITLE> : A l'intérieur de l'en-tête que nous venons de voir, ! Les principales couleurs prédéfinies
pourront apparaître ces 2 balises. Le texte qu'elles contiennent
" aqua : bleu clair #00FFFF
constituera le titre de la page apparaissant physiquement en haut de la
" black : noir #000000
fenêtre du navigateur.
" blue : bleu #0000FF
" <BODY[…]> …</BODY> : Le corps, à proprement parler de votre page " fucshia : lilas #FF00FF
sera contenu entre ces 2 balises. La balise d'ouverture peut recevoir des " gray : gris moyen #808080
paramètres : " green : vert #008000
! BGCOLOR=couleur couleur de fond " lime : vert clair #00FF00
" maroon : marron #800000
! BACKGROUD=url image de fond " navy : bleu marine #000080
! TEXT=couleur couleur du texte par défaut " olive : kaki #808000
! LINK=couleur couleur des textes-liens " purple : pourpre #800080
! ALINK=couleur couleur des textes-liens lors du click " red : rouge #FF0000
" silver : argenté #C0C0C0
! VLINK=couleur couleur des textes-liens visités " teal : cyan foncé #008080
! LEFTMARGIN=n (pixels) marge gauche " white : blanc #FFFFFF
! RIGHTMARGIN=n (pixels) marge droite " yellow : jaune #FFFF00
 29 30

3. Le langage 3. Le langage
! 3.1. Les balises de structuration ! 3.1. Les balises de structuration
" Exemple " Exemple
<HTML> <HTML>
<HEAD> <HEAD>
<!-- Auteur : JLuc - Date : 8 nov. 2004 --> <!-- Auteur : JLuc - Date : 8 nov. 2004 -->
<META Name="Author" Content="JLuc"> <META Name="Author" Content="JLuc">
<META Name="Last-Modified" Content="8 nov. 2004"> <META Name="Last-Modified" Content="8 nov. 2004">
<TITLE> <TITLE>
Exemple de structure de document HTML Exemple de structure de document HTML
</TITLE> </TITLE>
</HEAD> </HEAD>
<BODY text=#400000 bgcolor=green> <BODY text=#400000 bgcolor=green>
… …
Bonjour tout le monde… Bonjour tout le monde…
<!-- Ma page HTML ici… --> <!-- Ma page HTML ici… -->
… …
</BODY> </BODY>
</HTML> </HTML>

31 32

3. Le langage 3. Le langage
! 3.2. Les balises de formatage de lignes ! 3.2. Les balises de formatage de lignes
! <BR> : Balise sans fermeture qui provoque un retour en ! <CENTER>…</CENTER> : version moderne de
début de ligne suivante. <DIV ALIGN=center>
! <P[…]>…</P> : Balises définissant un paragraphe ! <PRE>…</PRE> : Permet de restituer un texte tel que

(espacement entre les lignes qui précèdent et celles qui l'utilisateur l'a tapé en respectant les espaces, les RC
suivent) (sans <BR>).
" ALIGN=left alignement à gauche ! <BLOCKQUOTE>…</BLOCKQUOTE> : Opère une
" ALIGN=right alignement à droite indentation de tout le texte inclus entre les balises. En
" ALIGN=center alignement au centre multipliant le nombre de balises, on accroît d'autant
" ALIGN=justify justification l'indentation.
! <DIV ALIGN= left | right | center | justify>…</DIV> :
Alignement d'objets divers (texte, image, tableau, etc.).
Par rapport à <P> : pas d'espacement.
 33
3. Le langage
! 3.3. Les balises de formatage de texte
! <FONT [size=n] [color=couleur] [face=police]>…</FONT>
Ces balises permettent de choisir pour le texte qu'elles
encadrent, la police, la taille et la couleur utilisées.
" Le nombre n est compris entre 1 (plus petite taille) et 7 (plus
grosse taille), où 3 est la taille par défaut.
Exemple : si celle-ci est à 12 pt, on a :
1: 9 pt, 2 10 pt, 3: 12 pt, 4: 14 pt, 5: 18 pt, 6: 24 pt, 7: 36 pt
On peut aussi donner des taille relative à celle de la fonte par
défaut (choisie par l'utilisateur final). Pour cela on note +n ou -n
ou n est toujours pris sur [1,7] et où le résultat ne dépassera
jamais les tailles extrêmes. Par exemple, si la taille par défaut
est 3, +7 ne correspondra pas à 10, mais sera limitée par 7. Pour
obtenir des tailles différentes de celles qui sont ainsi pré fixées,
on a encore recours aux feuilles de style.
35
3. Le langage
! 3.3. Les balises de formatage de texte
! <B>…</B> : permet de mettre en caractères gras (bold)
le texte compris entre ces 2 balises.
! <STRONG>…</STRONG> : rend l'aspect plus gras que
le précédent.
! <BIG>…</BIG> : augmentent le texte concerné d'un
degré par rapport au texte environnant. Si celui-ci est de
niveau 7, ces balises sont sans effet.
! <SMALL>…</SMALL> : effet inverse au précédent.
! <STRIKE>…</STRIKE> : barre le texte compris entre
ces 2 balises.
34
3. Le langage
! 3.3. Les balises de formatage de texte
! <FONT [size=n] [color=couleur] [face=police]>…</FONT>
" La couleur peut être donnée par son nom (voir plus haut la liste
non exhaustive) ou par son codage RVB sous la forme d'un
nombre de 6 chiffres hexa ou les 2 premiers représentent la
densité de rouge, les 2 suivants, celle de vert et les 2 derniers,
celle de bleu.
" La désignation de la police peut comporter plusieurs noms. Dans
ce cas, selon les polices installées sur la machine client, la
première sera choisie, à défaut, la seconde, etc.
36
3. Le langage
! 3.3. Les balises de formatage de texte
! <I>…</I> : met le texte compris entre ces 2 balises en
italique.
! <U>…</U> : souligne le texte compris entre ces 2
balises.
! <SUB>…</SUB> : met le texte compris entre ces 2
balises en indiceindice.
! <SUP>…</SUP> : met le texte compris entre ces 2
balises en exposantexposant.
! <Hn>…</Hn> : où n va de 1 (+gros) à 6 (+petit)
 37 38

3. Le langage 3. Le langage
! 3.3. Les balises de formatage de texte ! 3.3. Les balises de formatage de texte
! Quelques caractères spéciaux ! Exemple
<p>
Bonjour tout le monde...
&lt; < &agrave; à </p>

&gt; > &iuml; ï <center>

&amp; & &ccedil; ç Un texte centr&eacute;.
</center>
&nbsp; [espace] &ntilde; ñ
<br> <!-- Un saut de ligne -->
&eacute; é &#169; ©
&egrave; è &#171; « <PRE>
Une texte tel qu'il est tap&eacute;, avec 3 espaces l&agrave; -&gt; " "
&ecirc; ê &#187; » </PRE>

<BLOCKQUOTE>
Un texte indent&eacute;.
</BLOCKQUOTE>

39 40

3. Le langage 3. Le langage
! 3.3. Les balises de formatage de texte ! 3.3. Les balises de formatage de texte
! Exemple ! Exemple
<p> <p>
Bonjour tout le monde... <FONT size=4 color=#000080 face="Arial">
</p> Une texte en Arial bleu marine de taille 4.
</FONT>
<center>
Un texte centr&eacute;. <p>
</center> <B> Un texte en gras. </B>

<br> <!-- Un saut de ligne --> <p>

<STRONG> Un texte plus gras. </STRONG>
<PRE>
Une texte tel qu'il est tap&eacute;, avec 3 espaces l&agrave; -&gt; " " <p>
</PRE> <BIG> Un texte un peu plus gros. </BIG>

<BLOCKQUOTE> <p>
Un texte indent&eacute;. <SMALL> Un texte un peu plus petit. </SMALL>
</BLOCKQUOTE>
 41 42

3. Le langage 3. Le langage
! 3.3. Les balises de formatage de texte ! 3.3. Les balises de formatage de texte
! Exemple ! Exemple
<p>
<FONT size=4 color=#000080 face="Arial">
<p>
Une texte en Arial bleu marine de taille 4.
<STRIKE> Un texte barr&eacute;. </STRIKE>
</FONT>
<p>
<p>
<I> Un texte en italique. </I>
<B> Un texte en gras. </B>
<p>
<p>
<U> Un texte soulign&eacute;. </U>
<STRONG> Un texte plus gras. </STRONG>
<p>
<p>
Un texte en <SUB> indice </SUB>.
<BIG> Un texte un peu plus gros. </BIG>
<p>
<p>
Un texte en <SUP> exposant </SUP>.
<SMALL> Un texte un peu plus petit. </SMALL>

43 44

3. Le langage 3. Le langage
! 3.3. Les balises de formatage de texte ! 3.3. Les balises de formatage de texte
! Exemple ! Exemple

<p>
<STRIKE> Un texte barr&eacute;. </STRIKE>

<p> <H1> Un texte de taille H1. </H1>

<I> Un texte en italique. </I>
<H2> Un texte de taille H2. </H2>
<p>
<U> Un texte soulign&eacute;. </U> <H3> Un texte de taille H3. </H3>

<p> <H4> Un texte de taille H4. </H4>

Un texte en <SUB> indice </SUB>.
<H5> Un texte de taille H5. </H5>
<p>
Un texte en <SUP> exposant </SUP>. <H6> Un texte de taille H6. </H6>
 45 46

3. Le langage
! 3.3. Les balises de formatage de texte
! Exemple
<H1> Un texte de taille H1. </H1>
<H2> Un texte de taille H2. </H2>
<H3> Un texte de taille H3. </H3>
<H4> Un texte de taille H4. </H4>
<H5> Un texte de taille H5. </H5>
3. Le langage
! 3.3. Les balises de formatage de texte
! Lignes horizontales
" La balise <HR> permet de tracer une ligne horizontale
" Attributs :
# ALIGN : Permet d'aligner la ligne horizontale sur la page.
Valeurs : RIGHT, LEFT ou CENTER
# WIDTH : Spécifie la largeur de la ligne (en pixels ou % de la
fenêtre)
# SIZE : Epaisseur de la ligne (de 1 à 10)
# NOSHADE : S'il est présent, l'effet d'ombre (3d) est annulé

<H6> Un texte de taille H6. </H6>

47 48

3. Le langage 3. Le langage
! 3.3. Les balises de formatage de texte ! 3.4. Les balises de liste
! Lignes horizontales ! <UL[type=disc | circle | square]>…</UL>
" Exemple
met sous forme de liste où chaque item, contenu entre
des balises <LI>…</LI> sera précédé du signe choisi.
<HR WIDTH=100 ALIGN=LEFT> " Disc = • (par défaut)
<HR WIDTH=150 COLOR="blue" ALIGN=LEFT>
" circle = o
<HR WIDTH=200 COLOR="#008000" NOSHADE ALIGN=LEFT>
" square = !
 49 50

3. Le langage 3. Le langage
! 3.4. Les balises de liste ! 3.4. Les balises de liste
! <UL[type=disc | circle | square]>…</UL> ! <UL[type=disc | circle | square]>…</UL>
" Exemple " Exemple

<p> <p>
Ceci est une liste : Ceci est une liste :
</p> </p>

<UL type=square> <UL type=square>

<LI> Premier &eacute;l&eacute;ment de la liste. </LI> <LI> Premier &eacute;l&eacute;ment de la liste. </LI>
<LI> Ceci est le 2&egrave;me &eacute;l&eacute;ment... </LI> <LI> Ceci est le 2&egrave;me &eacute;l&eacute;ment... </LI>
<LI> Et voici le 3&egrave;me ! </LI> <LI> Et voici le 3&egrave;me ! </LI>
</UL> </UL>

51 52

3. Le langage 3. Le langage
! 3.4. Les balises de liste ! 3.4. Les balises de liste
! <OL[type=car][start=n]>…</OL> : même fonctionnement ! <OL[type=car][start=n]>…</OL>
que le précédent avec des items encadrés par
<LI>…</LI>. Le signe précédant chaque item sera cette
fois un chiffre incrémenté à chaque item rencontré et
initialisé à la valeur start (1 par défaut). Le type sera
défini de la façon suivante :
<p>
Ceci est une autre liste :
</p>

<OL type=i>
<LI> Premier &eacute;l&eacute;ment de la liste. </LI>
<LI> Ceci est le 2&egrave;me &eacute;l&eacute;ment... </LI>
<LI> Et voici le 3&egrave;me ! </LI>
</OL>
 53 54

3. Le langage 3. Le langage
! 3.4. Les balises de liste ! 3.4. Les balises de liste
! <OL[type=car][start=n]>…</OL> ! <DL>…</DL> : Ces balises permettent aussi de créer
des listes comportant pour chaque item un titre introduit
par la balise <DT> (sans fermeture) puis une définition
introduite par la balise <DD> (sans fermeture).

<p>
Ceci est une autre liste :
</p>

<OL type=i>
<LI> Premier &eacute;l&eacute;ment de la liste. </LI>
<LI> Ceci est le 2&egrave;me &eacute;l&eacute;ment... </LI>
<LI> Et voici le 3&egrave;me ! </LI>
</OL>

55 56

3. Le langage 3. Le langage
! 3.5. Les balises de table ! 3.5. Les balises de table
" <TABLE [attributs]>…</TABLE> : permet de réaliser un " <TABLE [attributs]>…</TABLE>
tableau dont chacune des lignes sera définie entre les
balises <TR> et </TR> et pour chacune d’elles, chaque case <TABLE ALIGN=center BGCOLOR=lightgray WIDTH=50% BORDER=1 CELLSPACING=2>
sera définie entre les balises <TD> et </TD>. <TR> <!-- Ligne 1 -->
<TD> <B> Nom </B> </TD>
! ALIGN=left | right | center alignement dans le document <TD> <B> Pr&eacute;nom </B> </TD>
<TD> <B> Age </B> </TD>
! BGCOLOR=couleur couleur du fond par défaut </TR>
<TR> <!-- Ligne 2 -->
! WIDTH=nb. pixels ou % largeur sur le document <TD> Dupont </TD>
<TD> Eglantine </TD>
! HEIGHT= nb. pixels ou % hauteur sur le document <TD> 18 </TD>
! BORDER=nb. pixels épaisseur de l’effet 3D </TR>
<TR> <!-- Ligne 3 -->
! CELLSPACING=nb. pixels espace entre cases <TD> Dupr&eacute; </TD>
<TD> Thomas </TD>
! CELLPADDING=nb. pixels espace bord/contenu de case <TD> 19 </TD>
</TR>
</TABLE>
 57 58

3. Le langage 3. Le langage
! 3.5. Les balises de table ! 3.5. Les balises de table
" <TABLE [attributs]>…</TABLE> " La balise <TR> reprend certains attributs qu’elle permet
d’appliquer à la rangée de cases qu’elle définit (BGCOLOR
<TABLE ALIGN=center BGCOLOR=lightgray WIDTH=50% BORDER=1 CELLSPACING=2>
et ALIGN).
<TR> <!-- Ligne 1 -->
<TD> <B> Nom </B> </TD>
" La balise <TD> reprend les mêmes attributs a son compte
<TD> <B> Pr&eacute;nom </B> </TD> ainsi que :
<TD> <B> Age </B> </TD>
</TR> ! COLSPAN=n nb. de cellules combinées horizontalement
<TR> <!-- Ligne 2 -->
<TD> Dupont </TD> ! ROWSPAN=n nb. de cellules combinées verticalement
<TD> Eglantine </TD>
<TD> 18 </TD>
</TR>
<TR> <!-- Ligne 3 -->
<TD> Dupr&eacute; </TD>
<TD> Thomas </TD> " NB : </TR> et </TD> sont optionnels
<TD> 19 </TD>
</TR>
</TABLE>

59 60

3. Le langage 3. Le langage
! 3.6. Les balises de liens ! 3.6. Les balises de liens
" <A>…</A> : définition d'un lien permettant de se déplacer " <A>…</A>
vers une cible qui est : ! NAME=nom définition d'une ancre dans une page
! soit un endroit précis dans une page (éventuellement la " nom sera une chaîne de caractères débutant par # ("#renvoi")
page active), ! HREF=url adresse de la cible
! soit vers le début d'une autre page. " Cette adresse peut être soit absolue
(http://www.luminy.univ-mrs.fr),
Le lien peut porter sur un objet quelconque de la page soit relative lorsqu'il s'agit de naviguer sur un site
source (texte, image, etc.) (../Chapitre_2.html).
Elle peut se réduire (ou être précisée) par le nom d'une ancre
(../Chapitre_2.html#Parag.2).
" HREF permet aussi d'émettre un message vers une adresse
précisée (mailto:mon.adresse.mail@laposte.net), ou de
télécharger des fichiers non html
(ftp://www.monserveurftp.com/fichier.exe)
 61 62

3. Le langage 3. Le langage
! 3.6. Les balises de liens ! 3.6. Les balises de liens
" <A>…</A> " <A>…</A>
! TARGET=cadre lieu de chargement de la page ! ONCLICK=action
" Une fenêtre peut être subdivisée en plusieurs cadres (en-tête, action à exécuter lorsque le lien est cliqué
marge, partie principale, etc.) . ! ONMOUSEOVER=action
A l'occasion d'un chargement, on peut préciser le cadre appelé à action à exécuter lorsque la souris survole le lien
recevoir le nouveau document html. ! ONMOUSEOUT=action
On peut ainsi laisser inchangés tous les cadres définis sauf celui
action à exécuter lorsque la souris ne survole plus le lien
concerné par le chargement.
Le nom des cadres est une chaîne de caractères.
! Pour ces derniers attributs, le plus souvent, l'action est réalisée
Il existe par ailleurs des mots réservés pour autoriser le chargement à par un script.
se substituer à la totalité de la fenêtre (_top), à s'opérer dans le cadre
dominant celui dans lequel apparaît le lien s'il existe, sinon dans une
nouvelle fenêtre (_parent), à remplacer le cadre courant (_self) ou a
forcer l'ouverture d'une nouvelle fenêtre (_blank).

63 64

3. Le langage 3. Le langage
! 3.6. Les balises de liens ! 3.6. Les balises de liens
" <A>…</A> " <A>…</A>
! Exemple : l’ancre <A> ! Exemple : lien interne à la page
<A HREF="page.html" TARGET="_blank"> " Un lien interne permet de se déplacer à l’intérieur
Cliquez ici pour ouvrir une fen&ecirc;tre d’une même page
</A> 1 - Définir la cible d’un lien (l’ancre)
<A NAME="top"></A>

Le nom ne doit pas contenir d’espaces, ni d’accents, ni de

Pour afficher le document caractères spéciaux.
dans une nouvelle fenêtre 2 - Associer un lien à l’ancre
du navigateur <A HREF="#top">top</A>
 65 66

3. Le langage 3. Le langage
! 3.6. Les balises de liens ! 3.6. Les balises de liens
" <A>…</A> " <A>…</A>
! Exemple : lien interne au site (chemin relatif) ! Exemple : lien externe (adresse absolue)
" Lien vers une page située dans le même répertoire
<A HREF="nom.htm">Cliquez ici</A>
Lien externe vers un site http
" Lien dans un répertoire différent <A HREF="http://www.monsite.com"> Découvrez Mon Site</A>
<A HREF="sujet/nom.htm">Cliquez ici</A>
Lien externe vers un serveur FTP
" Lien dans un même répertoire et vers une ancre d'une autre page <A HREF="ftp://ftp.monsite.com"> FTP Mon Site</A>
<A HREF="nom.htm#top">Cliquez ici</A>
Autres protocoles : par exemple un lien externe vers un serveur de
" Lien dans un répertoire différent et vers une ancre d'une autre page
<A HREF="sujet/nom.htm#top">Cliquez ici</A> news
<A HREF="news://news.monsite.com"> Les news de
" Lien vers un fichier en téléchargement Monsite</A>
<A HREF="archive.zip">Cliquez ici pour télécharger le
fichier</A>

67 68

3. Le langage 3. Le langage
! 3.6. Les balises de liens ! 3.6. Les balises de liens
" <A>…</A> " <A>…</A>
! Exemple : lien de messagerie ! Exemple : lien de messagerie
" Un lien de messagerie (e-mail) permet d!ouvrir la messagerie " Lien e-mail simple
associée au navigateur : <A HREF="mailto:nom@site.com"> Ecrivez-moi </A>
<A HREF="mailto:machin@chose"> Ecrivez-moi </A>
" Lien e-mail avec sujet
" Attributs sont précédés de ? et séparé par & : <A HREF="mailto:nom@site.com?subject=renseignement">
# subject : sujet du mail Ecrivez-moi </A>
# cc : destinataires en copie
# body : texte du mail " Lien e-mail avec sujet et texte dans le corps du message
<A HREF="mailto:nom@site.com?subject=renseignement&body=Votre
message"> Ecrivez-moi </A>

" Lien e-mail envoyé à 2 destinataires

<A HREF=mailto:nom@site.com?cc=nom2@site2.com>
Ecrivez-nous </A>
 69 70

3. Le langage 3. Le langage
! 3.7. Les images ! 3.7. Les images
" La balise <IMG> " Alignerune image
! Pour insérer une image sur la page.
Ses attributs précisent l’adresse du fichier image et la position de l’image : Alignement du texte et de l'image : Attribut ALIGN
" SRC indique l’adresse du fichier : ! Soit plusieurs lignes de texte peuvent s!afficher à côté de l!image :
# Soit en relatif par rapport au fichier courant " LEFT : Image à gauche (texte à droite)
<IMG SRC="images/logo.gif"> " RIGHT : Image à droite (texte à gauche)
# Soit en absolu par un lien http ! Soit l!image et le texte sont sur la même ligne (petite image)
<IMG SRC="http://www.machin.com/images/logo.gif">
" TOP (ou TEXTTOP) : le haut de l!image est aligné sur le plus haut
" WIDTH et HEIGHT : largueur et hauteur de l!image en pixels caractère de la ligne
(accélère le chargement de l'image)
" ABSMIDDLE : Le milieu de l!image est aligné sur le milieu du texte
" ALT : Texte associé à l!image
Ce texte s!affiche avant que l!image ne se charge ou lorsque le visiteur désactive le " ABSBOTTOM: le bas de l!image est aligné sur le bas du caractère le
chargement des images. Il apparaît également sous la forme d!une bulle d!aide lorsque le plus bas du texte
pointeur de la souris passe au-dessus de l!image.
" MIDDLE (ou CENTER) : Le milieu de l!image est aligné sur la ligne de
" HSPACE et VSPACE : Espace vertical ou horizontal entre le texte et base du texte
l!image (en pixels) " BASELINE(ou BOTTOM) : Le bas de l!image est aligné sur la ligne de
! Pour mettre un lien sur une image, il suffit de placer l'image dans une ancre : base du texte (défaut)
<A HREF="www.machin.com/index.htm"><IMG
SRC="images/logo_machincom.gif"></A>

71 72

3. Le langage 3. Le langage
! 3.7. Les images ! 3.7. Les images
" Aligner une image " Format des images
Par exemple ! GIF
" Adapté aux images contenant des zones de couleurs clairement
<p> distinctes
<img src="chrysanthem.jpg" width="155" height="126"
" Moins volumineux et plus rapide à charger que du JPEG
border="1" hspace="20" align="right"
alt="Les chrysanthèmes"> " Donne l'impression d'une image non rectangulaire grâce à la
Les chrysanthèmes sont de la famille des Composées Radiées, groupant transparence
environ 200 espèces distribuées dans l’hémisphère Nord et en Afrique # Meilleure intégration dans la page
du Sud, dont les marguerites, les tanaisies, et les pyrèthres. Les " Le GIF contient moins de couleur que le JPEG : il crée les couleurs
chrysanthèmes des jardins sont, pour la plupart, dérivés du manquantes par dithering (combinaison de couleurs proches dans la
<i>Chrysanthemum indicum</i> et d’espèces voisines provenant palette). La qualité de l'image en est parfois diminuée.
d’Extrême-Orient.
</p> ! JPEG
" Adapté aux nombreuses modifications de couleurs (ex. photographies)
" La différence de rendu avec du GIF n'est sensible que lorsque le JPEG
est affiché sur 16 millions de couleurs
 73 74

4. Créer une page Web

! 4.1. Méthode

" On travaille en local sur une machine, au sein d’un

répertoire qui va contenir tous les fichiers de la page Web.

4. Créer une page Web " Très important : on fait un appel interne aux pages du site
(ou aux images) par des chemins relatifs.

! Exemple :
Pour faire un appel à la page musique.html du répertoire hobbies/
depuis la page index.html :
<A HREF="hobbies/musique.html">Une page musicale</A>

75 76

4. Créer une page Web 4. Créer une page Web

! 4.1. Méthode ! 4.2. Transfert sur un serveur distant par FTP
" Liste des fichiers du répertoire « MaPageWeb » " FTP : File Transfert Protocol
! index.html Permet de déposer ou récupérer des fichiers sur un serveur FTP.
Page de garde qui fait appel aux autres pages en fonction des différentes rubriques du site.
! Répertoire MesImages/ " Une fois le transfert effectué, l’accès à la page Web se fera
Ce répertoire contient toutes les images utilisées dans le site. à partir d’un navigateur par le protocole HTTP.
! Répertoire Rubrique1/
" index.html
Cette page est la page de garde de la rubrique 1. " Pour le FTP, 2 solutions :
" page1.html ! On lance le FTP par la console (le terminal)
" page2.html
" On tape : ftp {adresse du serveur FTP}
! Répertoire Rubrique2/
" index.html !On lance un logiciel client de FTP et on configure une nouvelle
Cette page est la page de garde de la rubrique 2. connexion pour le serveur en question
" page1.html
" page2.html " On dépose sur le compte distant tous les fichiers de la page
! Répertoire MesLiens/ Web tels qu’ils sont rangés dans le répertoire de travail,
" index.html avec la même arborescence.
 77

4. Créer une page Web

! 4.2. Transfert sur un serveur distant par FTP

" Une fois que les fichiers sont «en ligne», tout le monde peut
accéder à la page de garde index.html en allant à l’URL :
http://www.monhebergeur.com/monlogin/
ou bien parfois :
http://monlogin.monhebergeur.com/

" Il n’est pas nécessaire de taper :

http://www.monhebergeur.com/monlogin/index.html
L’accès aux pages index.html ou index.htm se fait par défaut.