Cours HTML

2
Plan
Introduction au
langage HTML
!
!
!
Unit Introduction lInformatique
1. Petit historique dInternet

2. Gnralits sur le langage HTML
3. Le langage en dtails
4. Crer une page Web
Licence 1 semestre 1
http://www.dil.univ-mrs.fr/~mari/

!
Dbut des annes 70

" ARPAnet
(Advanced Research Projects Agency Network)

Rseau pour la dfense amricaine
" Les principes
!
!
!
pas de lieu centralis pour viter la paralysie en cas de destruction

d'un point du rseau
le rseau doit fonctionner, mme en cas de destruction partielle de
celui-ci
la connexion de chaque noeud ou ordinateur plusieurs autres
dcoupage de l'information en "paquets" indpendants
la circulation de l'information par diffrents chemins, de faon
scurise
" Premire
dmonstration publique du rseau : oct. 1972

" En 1972 galement, envoi du premier courrier lectronique
par Ray Tomlinson

!
Au cours des annes 70

" L'interconnexion
des rseaux est adopte par les universits
" Dveloppement
des connexions aux Etats-Unis puis en

Europe, au Japon, en Ocanie
pour :
!
!
!
la transmission d'informations, de fichiers

la communication
l'utilisation partage de gros ordinateurs
" Cration
!
!
!
"
"
213 machines relies en 1981

535 000 en 1991
" Le
rseau chappe de plus en plus aux militaires au profit

des universitaires qui le rebaptisent "Internet", abrviation de
International Network
" Le grand public n'est pas encore l... il faut connatre le
langage de lInternet !
de protocoles (TCP/IP, Mail, FTP, ...)
TCP/IP : Transmission Control Protocol / Internet Protocol

"
Annes 80
dfinition du mode de transmission de linformation

principe grossier : acheminer des donnes sur un rseau en les
fragmentant en petits paquets
protocole officiel en 1981.

!
Annes 90
" Dveloppement
!
!
!
!

!
Annes 90
des utilisations prives de l'internet
1989 : Tim Berners-Lee invente la navigation hypertexte

(www.w3.org) pour rorganiser les archives du CERN
1993 : le logiciel Mosaic adapte le concept d'hypertexte au parcours
du rseau mondial
Le logiciel Netscape, issu de Mosaic, popularise l'utilisation d'Internet
1994 : Lancement de Yahoo
1998 : Lancement de Google
" Les
!
autorits publiques encouragent ce dveloppement
1993 : projet d'autoroute de l'information aux Etats Unis : 17 M$

pour la construction d'un rseau de fibres optiques
1998 : Lancement du Programme dAction Gouvernemental pour la
Socit de lInformation PAGSI (www.internet.gouv.fr)
dcembre 1999 : l'UE lance son programme e-europe
(europa.eu.int)

!
Annes 2000
" 2000
!
!
!
!
"
"
Partager des donnes

Communiquer de linformation
Un premier langage pour communiquer : HTML

Depuis 1997, HTML 4.0 standardis par le W3C
" Aujourdhui, nombre de pages Web recenses par Google :
+ de 18 milliards de pages !
" Recherche HTML sur Google
4 170 000 000 pages !
"
: Mise en place du nouveau "portail de l'administration

franaise" (www.service-public.fr)
" 2001 : Crations de nouveaux noms de domaines
" 2001 : En France, cration du Forum de l'internet
" Des chiffres ? (www.journaldunet.com)
!
Internet
Elections des reprsentants de l'ICANN
!Internet Corporation for Assigned Names and Numbers!

Noms de domaines
Adresses IP
Numros de ports (normalisation)
" 2000
10
"
Aujourdhui 319 000 000 internautes dans le monde ( domicile)

+ 1 000 000 000 qui utilisent Internet rgulirement
11
12

!
Quelques adresses sur HTML

" http://www.ccim.be/ccim328/
" http://www.ccr.jussieu.fr/urfist/html/html.htm/
" http://mediatheque.ircam.fr/docs/HTML/
" http://guide.ungi.net/
" http://www.snv.jussieu.fr/archambault/cours/html/
" http://validator.w3.org/
13
14
! HTML,
! Quelques
"
cest quoi ?
exemples
Un langage pour crire des pages web
Les Pages Jaunes
15
16
! Quelques
! Quelques
exemples
Pour faire des recherches sur Internet

Google
exemples
Pour acheter des livres ou des CD

Amazon
17
18
! Quelques
! Quelques
exemples
exemples
Pour en savoir plus sur

Un site sur les White Stripes
Pour se procurer le cours dHTML

Ma page Web personnelle
19
20
! Introduction
! Introduction
" HTML
1.0 fait son entre sur Internet en Mai 1991.

" HTML 2.0 apparat en septembre 1995...
(les vrais dbuts).
" HTML 3.0 apparat le 7 Mai 1996
(en voie de disparition).
" HTML
4.0 est propos le 8 Mai 1997.

" Rput tre le standard actuel.
" Cette version fonctionne partir des versions 4.0 sur les 2
principaux navigateurs (Netscape et Internet Explorer). Elle
apporte les nouveauts suivantes :
!
!
!
!
!
!
les frames,
les feuilles de style,
le contrle amlior des tableaux,
les formulaires optimiss,
lintgration normalise des lments multimdia,
larrive des symboles mathmatiques
21
22
! Caractristiques
! Caractristiques
" En
revanche, le logiciel permettant de linterprter dpend

du systme dexploitation.
" Ce logiciel interprteur sera celui du navigateur (du browser,
du butineur).
" Il peut comporter des textes, des images, des composants
multimdia (son, vido).
" Surtout, il permet de construire des liens (hyper-texte). Ces
liens pouvant tre de plusieurs types (internes, externes
etc.).
" HTML
= HyperText Markup Language.

" Il repose sur le protocole HTTP (HyperText Transfert
Protocol).
" Cest un langage de dfinition de documents
! Ce nest pas un langage de programmation.
" Il est interprt par tous les navigateurs.
" On lcrit 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 sagit dun langage portable.
23
24
! Description
! Un
" C'est
un langage balises (tag).

plupart d'entre elles aprs avoir t ouvertes ncessitent
d'tre fermes.
" L'ordre de fermeture doit tre exactement l'ordre inverse
d'ouverture.
! Comme les parenthses dune formule mathmatique
" Certaines reoivent des paramtres optionnels
complmentaires contenus dans la balise d'ouverture.
" La
exemple de page
<html>
<head>
<title>Une page HTML</title>
</head>
<body>

Voici une page Web !

<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 dfinie votre
page HTML. Elles doivent apparatre aux deux extrmits de votre
document source.
" <HEAD> </HEAD> : C'est entre ces 2 balises que vont tre contenues
des informations sur la page (le titre, l'auteur, le contenu, les mots-cls,
le jeu de caractres utiliss, etc.). On peut aussi trouver du texte qui
apparatra dans la page (mais, ce n'est pas courant) ainsi que des
scripts.
" <META NAME="">
<META CONTENT=""> : Meta information. Permet de spcifier par
exemple le nom de lauteur du document, la date de cration et de
multiples informations permettant de caractriser la page HTML.
" <!- --> : Commentaires.
"
3. Le langage
27
28
3. Le langage
3. Le langage
! 3.1.
<TITLE> </TITLE> : A l'intrieur de l'en-tte que nous venons de voir,

pourront apparatre ces 2 balises. Le texte qu'elles contiennent
constituera le titre de la page apparaissant physiquement en haut de la
fentre du navigateur.
" <BODY[]> </BODY> : Le corps, proprement parler de votre page
sera contenu entre ces 2 balises. La balise d'ouverture peut recevoir des
paramtres :
"
!
!
!
!
!
!
!
!
BGCOLOR=couleur
BACKGROUD=url
TEXT=couleur
LINK=couleur
ALINK=couleur
VLINK=couleur
LEFTMARGIN=n (pixels)
RIGHTMARGIN=n (pixels)
couleur de fond
image de fond
couleur du texte par dfaut
couleur des textes-liens
couleur des textes-liens lors du click
couleur des textes-liens visits
marge gauche
marge droite
3.1. Les balises de structuration

!
Les principales couleurs prdfinies

"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
"
aqua :
black :
blue :
fucshia :
gray :
green :
lime :
maroon :
navy :
olive :
purple :
red :
silver :
teal :
white :
yellow :
bleu clair
noir
bleu
lilas
gris moyen
vert
vert clair
marron
bleu marine
kaki
pourpre
rouge
argent
cyan fonc
blanc
jaune
#00FFFF
#000000
#0000FF
#FF00FF
#808080
#008000
#00FF00
#800000
#000080
#808000
#800080
#FF0000
#C0C0C0
#008080
#FFFFFF
#FFFF00
29
30
3. Le langage
3. Le langage
! 3.1.
! 3.1.
" Exemple
" Exemple
<HTML>
<HEAD>

<META Name="Author" Content="JLuc">
<META Name="Last-Modified" Content="8 nov. 2004">
<TITLE>
Exemple de structure de document HTML
</TITLE>
</HEAD>
<BODY text=#400000 bgcolor=green>
Bonjour tout le monde


</BODY>
</HTML>
<HTML>
<HEAD>

<META Name="Author" Content="JLuc">
<META Name="Last-Modified" Content="8 nov. 2004">
<TITLE>
Exemple de structure de document HTML
</TITLE>
</HEAD>
<BODY text=#400000 bgcolor=green>
Bonjour tout le monde


</BODY>
</HTML>
31
32
3. Le langage
3. Le langage
! 3.2.
! 3.2.
Les balises de formatage de lignes
 : Balise sans fermeture qui provoque un retour en

dbut de ligne suivante.
! <P[]> : Balises dfinissant un paragraphe
(espacement entre les lignes qui prcdent et celles qui
suivent)
!
"
"
"
"
ALIGN=left
ALIGN=right
ALIGN=center
ALIGN=justify
alignement gauche
alignement droite
alignement au centre
justification
<DIV ALIGN= left | right | center | justify></DIV> :

Alignement d'objets divers (texte, image, tableau, etc.).
Par rapport : pas d'espacement.
Les balises de formatage de lignes
<CENTER></CENTER> : version moderne de

<DIV ALIGN=center>
! <PRE></PRE> : Permet de restituer un texte tel que
l'utilisateur l'a tap en respectant les espaces, les RC
(sans ).
! <BLOCKQUOTE></BLOCKQUOTE> : Opre une
indentation de tout le texte inclus entre les balises. En
multipliant le nombre de balises, on accrot d'autant
l'indentation.
!
33
34
3. Le langage
3. Le langage
! 3.3.
! 3.3.
Les balises de formatage de texte


Ces balises permettent de choisir pour le texte qu'elles
encadrent, la police, la taille et la couleur utilises.
"
Le nombre n est compris entre 1 (plus petite taille) et 7 (plus

grosse taille), o 3 est la taille par dfaut.
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
dfaut (choisie par l'utilisateur final). Pour cela on note +n ou -n
ou n est toujours pris sur [1,7] et o le rsultat ne dpassera
jamais les tailles extrmes. Par exemple, si la taille par dfaut
est 3, +7 ne correspondra pas 10, mais sera limite par 7. Pour
obtenir des tailles diffrentes de celles qui sont ainsi pr fixes,
on a encore recours aux feuilles de style.


"
La couleur peut tre donne 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 reprsentent la
densit de rouge, les 2 suivants, celle de vert et les 2 derniers,
celle de bleu.
"
La dsignation de la police peut comporter plusieurs noms. Dans

ce cas, selon les polices installes sur la machine client, la
premire sera choisie, dfaut, la seconde, etc.
35
36
3. Le langage
3. Le langage
! 3.3.
! 3.3.
 : permet de mettre en caractres gras (bold)

le texte compris entre ces 2 balises.
! : rend l'aspect plus gras que
le prcdent.
! <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.
! : effet inverse au prcdent.
! <STRIKE></STRIKE> : barre le texte compris entre
ces 2 balises.
!
 : met le texte compris entre ces 2 balises en

italique.
! : souligne le texte compris entre ces 2
balises.
! : met le texte compris entre ces 2
balises en indiceindice.
! : 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.
! 3.3.
! Quelques
caractres spciaux
! Exemple

<
>
&

é
è
ê
<
>
&
[espace]
à
ï
ç
ñ
©
«
»
Bonjour tout le monde...


<center>
Un texte centré.
</center>
 

<PRE>
Une texte tel qu'il est tapé, avec 3 espaces là -> "
</PRE>
"
<BLOCKQUOTE>
Un texte indenté.
</BLOCKQUOTE>
39
40
3. Le langage
3. Le langage
! 3.3.
! 3.3.
! Exemple
! Exemple


Une texte en Arial bleu marine de taille 4.


Bonjour tout le monde...

<center>
Un texte centré.
</center>
 

 Un texte en gras. 

 Un texte plus gras. 

<PRE>
Une texte tel qu'il est tapé, avec 3 espaces là -> "
</PRE>
<BLOCKQUOTE>
Un texte indenté.
</BLOCKQUOTE>
"

<BIG> Un texte un peu plus gros. </BIG>

 Un texte un peu plus petit. 
41
42
3. Le langage
3. Le langage
! 3.3.
! 3.3.
! Exemple
! Exemple


Une texte en Arial bleu marine de taille 4.


<STRIKE> Un texte barré. </STRIKE>

 Un texte en italique. 

 Un texte en gras. 

 Un texte souligné. 

 Un texte plus gras. 

Un texte en indice .

<BIG> Un texte un peu plus gros. </BIG>

Un texte en exposant .

 Un texte un peu plus petit. 
43
44
3. Le langage
3. Le langage
! 3.3.
! 3.3.
! Exemple
! Exemple

<STRIKE> Un texte barré. </STRIKE>

 Un texte en italique. 

 Un texte souligné. 

Un texte en indice .

Un texte en exposant .
<H1> Un texte de taille H1. </H1>

45
46
3. Le langage
3. Le langage
! 3.3.
! 3.3.
! Exemple
! 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 : Spcifie la largeur de la ligne (en pixels ou % de la

fentre)

# SIZE : Epaisseur de la ligne (de 1 10)
# NOSHADE : S'il est prsent, l'effet d'ombre (3d) est annul

47
48
3. Le langage
3. Le langage
! 3.3.
! 3.4.
! Lignes
horizontales
" Exemple
<HR WIDTH=100 ALIGN=LEFT>

<HR WIDTH=150 COLOR="blue" ALIGN=LEFT>
<HR WIDTH=200 COLOR="#008000" NOSHADE ALIGN=LEFT>
Les balises de liste

<UL[type=disc | circle | square]></UL>
met sous forme de liste o chaque item, contenu entre
des balises <LI></LI> sera prcd du signe choisi.
"
Disc = (par dfaut)
"
circle = o
"
square = !
49
50
3. Le langage
3. Le langage
! 3.4.
! 3.4.

"
Exemple

"
Exemple


Ceci est une liste :


Ceci est une liste :


<UL type=square>
<LI> Premier élément de la liste. </LI>
<LI> Ceci est le 2ème élément... </LI>
<LI> Et voici le 3ème ! </LI>
</UL>
<UL type=square>
</UL>
51
52
3. Le langage
3. Le langage
! 3.4.
! 3.4.

<OL[type=car][start=n]></OL> : mme fonctionnement
que le prcdent avec des items encadrs par
<LI></LI>. Le signe prcdant chaque item sera cette
fois un chiffre incrment chaque item rencontr et
initialis la valeur start (1 par dfaut). Le type sera
dfini de la faon suivante :

<OL[type=car][start=n]></OL>

Ceci est une autre liste :

<OL type=i>
</OL>
53
54
3. Le langage
3. Le langage
! 3.4.
! 3.4.

<OL[type=car][start=n]></OL>

<DL></DL> : Ces balises permettent aussi de crer
des listes comportant pour chaque item un titre introduit
par la balise <DT> (sans fermeture) puis une dfinition
introduite par la balise <DD> (sans fermeture).

Ceci est une autre liste :

<OL type=i>
</OL>
55
56
3. Le langage
3. Le langage
! 3.5.
! 3.5.
Les balises de table
" <TABLE
[attributs]></TABLE> : permet de raliser un

tableau dont chacune des lignes sera dfinie entre les
balises <TR> et </TR> et pour chacune delles, chaque case
sera dfinie entre les balises <TD> et </TD>.
!
!
!
!
!
!
!
ALIGN=left | right | center

BGCOLOR=couleur
WIDTH=nb. pixels ou %
HEIGHT= nb. pixels ou %
BORDER=nb. pixels
CELLSPACING=nb. pixels
CELLPADDING=nb. pixels
alignement dans le document

couleur du fond par dfaut
largeur sur le document
hauteur sur le document
paisseur de leffet 3D
espace entre cases
espace bord/contenu de case
" <TABLE
[attributs]></TABLE>
<TABLE ALIGN=center BGCOLOR=lightgray WIDTH=50% BORDER=1 CELLSPACING=2>

<TR> 
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Age </TD>
</TR>
<TR> 
<TD> Dupont </TD>
<TD> Eglantine </TD>
<TD> 18 </TD>
</TR>
<TR> 
<TD> Dupré </TD>
<TD> Thomas </TD>
<TD> 19 </TD>
</TR>
</TABLE>
57
58
3. Le langage
3. Le langage
! 3.5.
! 3.5.
" <TABLE
" La
balise <TR> reprend certains attributs quelle permet

dappliquer la range de cases quelle dfinit (BGCOLOR
et ALIGN).
" La balise <TD> reprend les mmes attributs son compte
ainsi que :
[attributs]></TABLE>
<TABLE ALIGN=center BGCOLOR=lightgray WIDTH=50% BORDER=1 CELLSPACING=2>

<TR> 
<TD> Nom </TD>
<TD> Prénom </TD>
<TD> Age </TD>
</TR>
<TR> 
<TD> Dupont </TD>
<TD> Eglantine </TD>
<TD> 18 </TD>
</TR>
<TR> 
<TD> Dupré </TD>
<TD> Thomas </TD>
<TD> 19 </TD>
</TR>
</TABLE>
!
!
COLSPAN=n
ROWSPAN=n
" NB
nb. de cellules combines horizontalement

nb. de cellules combines verticalement
: </TR> et </TD> sont optionnels
59
60
3. Le langage
3. Le langage
! 3.6.
! 3.6.
Les balises de liens
" <A></A>
: dfinition d'un lien permettant de se dplacer

vers une cible qui est :
! soit un endroit prcis dans une page (ventuellement la
page active),
! soit vers le dbut d'une autre page.
Le lien peut porter sur un objet quelconque de la page
source (texte, image, etc.)
" <A></A>
!
NAME=nom
"
dfinition d'une ancre dans une page
nom sera une chane de caractres dbutant par # ("#renvoi")
HREF=url
adresse de la cible
Cette adresse peut tre soit absolue

(http://www.luminy.univ-mrs.fr),
soit relative lorsqu'il s'agit de naviguer sur un site
(../Chapitre_2.html).
Elle peut se rduire (ou tre prcise) par le nom d'une ancre
(../Chapitre_2.html#Parag.2).
" HREF permet aussi d'mettre un message vers une adresse
prcise (mailto:mon.adresse.mail@laposte.net), ou de
tlcharger des fichiers non html
(ftp://www.monserveurftp.com/fichier.exe)
"
61
62
3. Le langage
3. Le langage
! 3.6.
! 3.6.
" <A></A>
!
TARGET=cadre
"
" <A></A>
lieu de chargement de la page
Une fentre peut tre subdivise en plusieurs cadres (en-tte,

marge, partie principale, etc.) .
A l'occasion d'un chargement, on peut prciser le cadre appel
recevoir le nouveau document html.
On peut ainsi laisser inchangs tous les cadres dfinis sauf celui
concern par le chargement.
Le nom des cadres est une chane de caractres.
ONCLICK=action
action excuter lorsque le lien est cliqu
ONMOUSEOVER=action
action excuter lorsque la souris survole le lien
ONMOUSEOUT=action
action excuter lorsque la souris ne survole plus le lien
Il existe par ailleurs des mots rservs pour autoriser le chargement

se substituer la totalit de la fentre (_top), s'oprer dans le cadre
dominant celui dans lequel apparat le lien s'il existe, sinon dans une
nouvelle fentre (_parent), remplacer le cadre courant (_self) ou a
forcer l'ouverture d'une nouvelle fentre (_blank).
Pour ces derniers attributs, le plus souvent, l'action est ralise

par un script.
63
64
3. Le langage
3. Le langage
! 3.6.
! 3.6.
" <A></A>
!
Exemple : lancre <A>
<A HREF="page.html" TARGET="_blank">

Cliquez ici pour ouvrir une fenêtre
</A>
" <A></A>
!
Exemple : lien interne la page

" Un lien interne permet de se dplacer lintrieur
dune mme page
1 - Dfinir la cible dun lien (lancre)
<A NAME="top"></A>
Pour afficher le document

dans une nouvelle fentre
du navigateur
Le nom ne doit pas contenir despaces, ni daccents, ni de

caractres spciaux.
2 - Associer un lien lancre

<A HREF="#top">top</A>
65
66
3. Le langage
3. Le langage
! 3.6.
! 3.6.
" <A></A>
!
" <A></A>
Exemple : lien interne au site (chemin relatif)

"
Lien vers une page situe dans le mme rpertoire

<A HREF="nom.htm">Cliquez ici</A>
Exemple : lien externe (adresse absolue)

Lien externe vers un site http
"
Lien dans un rpertoire diffrent

<A HREF="sujet/nom.htm">Cliquez ici</A>
<A HREF="http://www.monsite.com"> Dcouvrez Mon Site</A>
"
Lien dans un mme rpertoire et vers une ancre d'une autre page
<A HREF="nom.htm#top">Cliquez ici</A>
<A HREF="ftp://ftp.monsite.com"> FTP Mon Site</A>
"
Lien dans un rpertoire diffrent et vers une ancre d'une autre page
<A HREF="sujet/nom.htm#top">Cliquez ici</A>
"
Lien externe vers un serveur FTP

Autres protocoles : par exemple un lien externe vers un serveur de
news
<A HREF="news://news.monsite.com"> Les news de
Monsite</A>
Lien vers un fichier en tlchargement

<A HREF="archive.zip">Cliquez ici pour tlcharger le
fichier</A>
67
68
3. Le langage
3. Le langage
! 3.6.
! 3.6.
" <A></A>
!
Exemple : lien de messagerie

Un lien de messagerie (e-mail) permet douvrir la messagerie
associe au navigateur :
<A HREF="mailto:machin@chose"> Ecrivez-moi </A>
" Attributs sont prcds de ? et spar par & :
# subject : sujet du mail
# cc : destinataires en copie
# body : texte du mail
"
" <A></A>
!
Exemple : lien de messagerie

"
Lien e-mail simple

<A HREF="mailto:nom@site.com"> Ecrivez-moi </A>
"
Lien e-mail avec sujet
<A HREF="mailto:nom@site.com?subject=renseignement">
Ecrivez-moi </A>
"
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
3. Le langage
!
3. Le langage
3.7. Les images

"
La balise <IMG>
!
70
Pour insrer une image sur la page.

Ses attributs prcisent ladresse du fichier image et la position de limage :
" SRC indique ladresse du fichier :
# Soit en relatif par rapport au fichier courant
3.7. Les images

" Aligner
une image
Alignement du texte et de l'image : Attribut ALIGN
!
"
<IMG SRC="images/logo.gif">
"
# Soit en absolu par un lien http
<IMG SRC="http://www.machin.com/images/logo.gif">
"
"
Soit plusieurs lignes de texte peuvent safficher ct de limage :
Soit limage et le texte sont sur la mme ligne (petite image)

"
WIDTH et HEIGHT : largueur et hauteur de limage en pixels

(acclre le chargement de l'image)
ALT : Texte associ limage
"
"
Ce texte saffiche avant que limage ne se charge ou lorsque le visiteur dsactive le

chargement des images. Il apparat galement sous la forme dune bulle daide lorsque le
pointeur de la souris passe au-dessus de limage.
"
HSPACE et VSPACE : Espace vertical ou horizontal entre le texte et

limage (en pixels)
Pour mettre un lien sur une image, il suffit de placer l'image dans une ancre :
"
LEFT : Image gauche (texte droite)

RIGHT : Image droite (texte gauche)
"
<A HREF="www.machin.com/index.htm"><IMG
SRC="images/logo_machincom.gif"></A>
TOP (ou TEXTTOP) : le haut de limage est align sur le plus haut
caractre de la ligne
ABSMIDDLE : Le milieu de limage est align sur le milieu du texte
ABSBOTTOM: le bas de limage est align sur le bas du caractre le
plus bas du texte
MIDDLE (ou CENTER) : Le milieu de limage est align sur la ligne de
base du texte
BASELINE(ou BOTTOM) : Le bas de limage est align sur la ligne de
base du texte (dfaut)
71
3. Le langage
!
3.7. Les images

" Aligner
une image
Par exemple

<img src="chrysanthem.jpg" width="155" height="126"
border="1" hspace="20" align="right"
alt="Les chrysanthmes">
Les chrysanthmes sont de la famille des Composes Radies, groupant
environ 200 espces distribues dans lhmisphre Nord et en Afrique
du Sud, dont les marguerites, les tanaisies, et les pyrthres. Les
chrysanthmes des jardins sont, pour la plupart, drivs du
Chrysanthemum indicum et despces voisines provenant
dExtrme-Orient.

72
3. Le langage
! 3.7.
Les images
" Format
!
"
"
"
"
des images
GIF
Adapt aux images contenant des zones de couleurs clairement
distinctes
Moins volumineux et plus rapide charger que du JPEG
Donne l'impression d'une image non rectangulaire grce la
transparence
# Meilleure intgration dans la page
Le GIF contient moins de couleur que le JPEG : il cre les couleurs
manquantes par dithering (combinaison de couleurs proches dans la
palette). La qualit de l'image en est parfois diminue.
JPEG
"
"
Adapt aux nombreuses modifications de couleurs (ex. photographies)

La diffrence de rendu avec du GIF n'est sensible que lorsque le JPEG
est affich sur 16 millions de couleurs
73
74

!
4.1. Mthode
" On
travaille en local sur une machine, au sein dun rpertoire

qui va contenir tous les fichiers de la page Web.
" Trs
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 rpertoire hobbies/
depuis la page index.html :
<A HREF="hobbies/musique.html">Une page musicale</A>
75

!
4.1. Mthode
"
Liste des fichiers du rpertoire MaPageWeb

!
index.html
Page de garde qui fait appel aux autres pages en fonction des diffrentes rubriques du site.
!
Rpertoire MesImages/
Ce rpertoire contient toutes les images utilises dans le site.

!
"
"
index.html
Cette page est la page de garde de la rubrique 1.
page1.html
page2.html
Rpertoire Rubrique2/
"
"
"

!
4.2. Transfert sur un serveur distant par FTP

" FTP
: File Transfert Protocol
Permet de dposer ou rcuprer des fichiers sur un serveur FTP.
" Une
fois le transfert effectu, laccs la page Web se fera

partir dun navigateur par le protocole HTTP.
Rpertoire Rubrique1/
"
76
index.html
Cette page est la page de garde de la rubrique 2.
page1.html
page2.html
Rpertoire MesLiens/
"
index.html
" Pour
!
le FTP, 2 solutions :
On lance le FTP par la console (le terminal)
"
On tape : ftp {adresse du serveur FTP}
On lance un logiciel client de FTP et on configure une nouvelle

connexion pour le serveur en question
" On dpose sur le compte distant tous les fichiers de la page
Web tels quils sont rangs dans le rpertoire de travail,
avec la mme arborescence.
!
77

!
4.2. Transfert sur un serveur distant par FTP

" Une
fois que les fichiers sont en ligne, tout le monde peut

accder la page de garde index.html en allant lURL :
http://www.monhebergeur.com/monlogin/
ou bien parfois :
http://monlogin.monhebergeur.com/
"
Il nest pas ncessaire de taper :

http://www.monhebergeur.com/monlogin/index.html
Laccs aux pages index.html ou index.htm se fait par dfaut.

Cours HTML

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Cours HTML

Загружено:

Авторское право:

Доступные форматы

2

Unit Introduction lInformatique

1. Petit historique dInternet

1. Petit historique dInternet

Dbut des annes 70

(Advanced Research Projects Agency Network)

1. Petit historique dInternet

pas de lieu centralis pour viter la paralysie en cas de destruction

dmonstration publique du rseau : oct. 1972

1. Petit historique dInternet

1. Petit historique dInternet

Au cours des annes 70

des rseaux est adopte par les universits

des connexions aux Etats-Unis puis en

la transmission d'informations, de fichiers

213 machines relies en 1981

rseau chappe de plus en plus aux militaires au profit

de protocoles (TCP/IP, Mail, FTP, ...)

TCP/IP : Transmission Control Protocol / Internet Protocol

dfinition du mode de transmission de linformation

1. Petit historique dInternet

1. Petit historique dInternet

des utilisations prives de l'internet

1989 : Tim Berners-Lee invente la navigation hypertexte

autorits publiques encouragent ce dveloppement

1993 : projet d'autoroute de l'information aux Etats Unis : 17 M$

1. Petit historique dInternet

1. Petit historique dInternet

Partager des donnes

Un premier langage pour communiquer : HTML

: Mise en place du nouveau "portail de l'administration

Elections des reprsentants de l'ICANN

!Internet Corporation for Assigned Names and Numbers!

Aujourdhui 319 000 000 internautes dans le monde ( domicile)

1. Petit historique dInternet

Quelques adresses sur HTML

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

Un langage pour crire des pages web

Les Pages Jaunes

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

Pour faire des recherches sur Internet

Pour acheter des livres ou des CD

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

Pour en savoir plus sur

Pour se procurer le cours dHTML

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

1.0 fait son entre sur Internet en Mai 1991.

4.0 est propos le 8 Mai 1997.

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

revanche, le logiciel permettant de linterprter dpend

= HyperText Markup Language.

2. Gnralits sur le langage HTML

2. Gnralits sur le langage HTML

un langage balises (tag).

Les balises de structuration

Les balises de structuration

<TITLE> </TITLE> : A l'intrieur de l'en-tte que nous venons de voir,

3.1. Les balises de structuration