Programmation web
Partie1:
Sites statiques à l’aide
de HTML et CSS
Cours de [Link]
Comment fonctionne le
Web ?
C'est un mécanisme client-serveur.
Le client demande un fichier,
le serveur lui donne ce dernier tel qu'il est stocké
Lorsque le client lance une requête pour
accéder à cette page (en cliquant sur un lien
ou en tapant l’URL correspondant).
Le serveur, quelque part sur le réseau
Internet ou Intranet, renvoie la réponse en
format HTML.
Pour une requête simple, la procédure
est illustrée sur la figure suivante.
Ce dialogue s'effectue selon des règles précises qui constituent un
protocole.
Le protocole de web est le HTTP (HyperText Transfert Protocol =
protocole de transfert hypertexte). Il est basé sur le protocole
TCP/IP et permet de définir le format, le contenu et l'ordre des
messages échangés entre le client et le serveur.
La communication entre le client et le serveur web s'effectue de la
manière suivante :
La communication entre le client et serveur web
s'effectue de la manière suivante :
le client envoie un message de requête au serveur
web. Ce dernier y répond par un message de
réponse.
Le protocole HTTP organise la structure de ces
messages.
Lors de l'envoi, une connexion TCP/IP est établie
avec le serveur web.
Si celui-ci peut fournir la page demandée, le
document est retourné, en format HTML, par la
même connexion, qui est ensuite refermée.
Il est possible de communiquer avec un serveur via
d'autres protocoles,
1-Comme FTP qui permet d'échanger des fichiers
2- Ou SMTP (Simple Mail Transfer Protocol) protocole simple de
transfert de courrier, POP, IMAP,...
Les pages web statiques sont des documents en HTML invariables
préparées à l’avance. Le serveur renvoie ces pages à l’utilisateur
mais n’effectue aucune action particulière.
Le code source de la page affichée par le navigateur sur le poste
client est identique au code source de la page web installée sur le
serveur.
Qu'est-ce que HTML ?
Langage de description de page qui permet de
coder de manière simple :
le texte de la page
les instructions de mise en forme
les appels aux fichiers externes
les appels aux pages liées
Qu'est-ce que HTML ?
◦ Les balises sont des mots-clés écrits entre un
< et un >
◦ Par exemple : <body>, <b>, <br>)
Peut être enrichi à l'aide de langages de
programmation (Java, Javascript, …)
Conventions d'écriture
Une page HTML est un fichier ASCII (texte)
Elle est tapée avec un traitement de texte (ex :
Notepad++) et enregistrer avec le
suffixe .html ou .htm
Un commentaire s'écrit entre <!-- et -->
Structure HTML
Commence toujours par la balise <html>
pour activer l'interprète HTML
Et Finit toujours par la balise </html>
Comporte toujours 2 parties.
Structure HTML
Pour les pages sans frames
L'entête entre les balises <head> et </head>
Le corps entre les balises <body> et </body>
Pour les pages avec frames
L'entête entre les balises <head> et </head>
Les cadres entre les balises <frameset> et
</frameset>
Le codage des couleurs
Pour être universel, le codage des couleurs
en HTML s'appuie sur le modèle RVB (Rouge
- Vert - Bleu).
Chaque couleur affichée est décomposable en
3 couleurs primaires
Chaque couleur primaire prend sa valeur
entre 0 et 255.
La couleur décrite par (0,0,0) est le noir.
La couleur décrite par (255,255,255) est le
blanc.
Le codage des couleurs
La palette complète des couleurs est décrite
par toutes les valeurs de triplet possible entre
le noir et le blanc.
Le rouge est décrit par (255,0,0)
Le codage se fait en hexadécimal sur 3x2
chiffres (2 par couleur primaire) précédés par
le caractère #
Le noir est représenté par #000000, le blanc
par #FFFFFF et le rouge par #FF0000
Les noms de fichier
Les fichiers HTML ont deux extensions
possibles : .htm et .html
La première page d'un site est en général
appelée [Link]
Si aucun fichier n'est précisé lors de la visite
d'un site, c'est ce fichier qui est recherché
par défaut sur le site par l'interprète HTML
Les noms de fichier
Les fichiers images sont de deux types :
Les images JPEG, principalement pour les
images de qualité photographique
Leur extension est .jpg
Les image GIF, pour les images de tout type et
pour les images animées.
Leur extension est .gif
Elles sont plus lourdes.
L'entête <head></head>
Contient des données "informatives" sur la
page
Est placé immédiatement après la balise
<html>
<title>…</title> change le titre de la
fenêtre dans laquelle la page s'affiche
L'entête <head></head>
En fonction des options déclarées, <meta>
va permettre de faciliter la recherche de la
page ou de passer automatiquement à une
autre page.
La balise META
Cette balise donne des informations précises sur la page web
elle est utile pour faire reconnaître votre page Web auprès des
moteurs de recherche
exemple :<META name=’’description’’ content=‘’description de
votre page’’>
<META name=’’keywords’’ content=‘’mot-clé, mot-clé, mot-
clé, …’’>
<HTML>
<HEAD>
<TITLE> La page Web du Master EVRM </TITLE>
<META name="author" content="Votre nom">
<META name="description" content="Cette page vous permettra
de trouver toutes les informations sur la licence
SIR">
<META name="keywords" content="Sir, BD, Réseaux,SI,BDR " >
</HEAD>
… reste du document
<HTML>
La balise META
<meta name=" Keywords "
content="mot-clé1[,mot-clé2,…]">
permet de rechercher la page dans certains
moteurs de recherche en se basant sur les
mots-clés indiqués
La balise META
<meta http-equiv="Refresh“
content="n;url=adresse de page">
permet de passer automatiquement à un autre site
après un certain délai
n = délai en seconde avant l'appel de la deuxième
page.
adresse de page = adresse (absolue ou relative)
de la deuxième page Web à afficher
Exercice à tester
<html>
<head>
<title>TP Bureautique : Deug STPI.</title>
<meta name="Keywords" content="STPI, Deug, HTML">
<meta name="Author" content=" Paris & Sahnoune">
<meta http-equiv="Refresh"
content="5; URL=[Link]
</head>
<body>
Dans quelques instants vous allez passez
automatiquement à une nouvelle page.
</body>
</html>
Le corps <body></body>
Permet de définir l'apparence du fond de
l'écran et la couleur des éléments textuels
1 balise Body et 1 seule par page
Elle peut s'employer seule ou avec une ou
plusieurs de ses options
Est placée immédiatement après la balise
</head>
Le corps <body></body>
</body> est placé immédiatement avant la
balise </html>
Est absent dans les pages décrivant des
frames
Les options du BODY
<body bgcolor="#RRVVBB" background="nom de
fichier" text = "#RRVVBB" link = "#RRVVBB"
vlink = "#RRVVBB" alink = "#RRVVBB">
BGCOLOR couleur de fond de la fenêtre
BACKGROUND image répétée sous forme de mosaïque en fond
TEXT couleur du texte ordinaire (si omis, utilisation des couleurs
standards)
LINK couleur du texte/de la bordure d'une image qui est un lien (si
omis, utilisation des couleurs standards)
VLINK couleur du texte/de la bordure d'une image qui est un lien
amenant sur une page déjà vue (si omis, utilisation des couleurs
standards)
ALINK couleur prise par un lien tant qu'on clique dessus (peu utilisé)
Toujours mettre un BGCOLOR en fonction de TEXT et LINK
(même s'il y a un BACKGROUND)
Le texte du body
Tout texte tapé hors d'une balise est
considéré comme du texte "statique" et
apparaîtra de ce fait à l'écran
La mise en forme se fait à 2 niveaux
caractères
paragraphes
Le texte du body
Il faut coder les caractères spécifiques au
français (et aux langues autres que l'anglais)
en utilisant un système de codage qui permet
un affichage universel quelque soit la langue
de l'ordinateur sur lequel les pages sont lues
Espace insécable ¦ | ± ±
£ £ ¥ ¥ Ø Ø
© © ® Ò ° °
² 2 ³ 3 & &
¼ ¼ ½ ½ ¾ ¾
à à À À œ œ
é é É É ë ë
î î Î Î ç ç
" " ß ß ñ ñ
< < > > µ µ
Mise en forme des caractères
<b> </b> : gras
<i> </i> : italique
<u> </u> : souligné
<basefont size="s"> sert à fixer la taille
par défaut dans une page Web (s un entier
compris entre 1 et 7)
La taille par défaut des caractères est fixée à 3
Mise en forme des caractères
<font face="police1[,police2,…]
size = "s|+s|-s"
color = "#RRVVBB"> … </font>
FACE : la première police installée est utilisée. Ne proposer que
des polices dont on est sûr qu'elles sont disponibles sur
l'ordinateur de consultation (Arial/Helvetica et Times New
Roman/Times)
SIZE : 1..7 (taille absolue) ou +1, +2... (taille relative par
rapport à la valeur spécifiée dans BASEFONT)
Les balises <font> </font> peuvent être imbriquées
<font face="…"><font size="+1">toto</font></ font> est
équivalent à <font face="…" size="+1">toto</ font>
Exercice 4
Écrivez le fichier reproduisant la page ci-
dessous
<html>
<head>
</head>
<body text=#CC2EFA bgcolor=#BDBDBD>
<FONT FACE="Arial Narrow" size=5>
<p> Ceci est maintenant le texte à apparaitre <i> formaté</i> avec <u><b>les
propriétés<b></u> définies dans la baslise <u>BODY ! </u>avec de modifications
locales de caractères …. A suivre…. Comme c’est beau ! </FONT>
<FONT FACE="Blackadder ITC " size=8 color=#F7D358> et sans <u>mentir</u>
si notre ….font est MJ Bold vous aurez la même !</FONT>
</body>
</html>
La police de caractère
Balise:
<FONT FACE="arial"> texte… </FONT>
(le texte sera affiché avec la police de caractère arial)
arial est une police de caractère comme :
albertus, verdana, Comic Sans MS …etc.
331
La taille des caractères
<FONT SIZE=Taille> texte… </FONT>
Exemple : <FONT SIZE=3> texte… </FONT>
(Affiche le texte avec une taille 3)
<FONT SIZE=+/-Taille> texte… </FONT>
Exemple : <FONT SIZE=+2> texte… </FONT>
(augmente la taille du texte de deux unités par
rapport à la taille par défaut)
Mise en forme des paragraphes
<h1> </h1> : format d'entête
<br> retour à la ligne simple
<p> retour à la ligne avec saut d’une ligne
<div align="center"></div> centre le
texte
<div align="right"></ div > positionne le
texte à droite dans la page
<div align="left"></div> positionne le
texte à gauche dans la page
Exercice
Écrivez le fichier reproduisant la page ci-
dessous
Les listes
2 types de listes
les listes à puce : précéder et faire suivre les
éléments de la liste avec les balises <ul> et
</ul>
les listes numérotées : précéder et faire suivre
les éléments de la liste avec les balises <ol> et
</ol>
Les listes
Chaque élément de la liste est précédé par la
balise <li>
elle provoque l'affichage de la puce ou du
chiffre
Les listes peuvent être imbriquées
Les options des listes à puces
l'option type="disc|circle|square" dans <ul>
permet de choisir sa puce.
taper les valeurs en minuscules (ie ne les
applique pas si elles sont tapées en majuscules).
Exemple : <ul type="disc">.
Les options des listes numérotées
L'option start=nombre_de_départ pour
démarrer la liste à une valeur spécifique
autre que 1.
l'option type=i|I|a|A|1 pour changer le type
de numérotation.
1=chiffres arabes (option par défaut),
i=romains minuscules, I=majuscules,
a=lettres minuscules, A=majuscules.
Exemple : <ol type="I" start=4>
Les listes hiérarchiques
2 listes imbriquées l'une dans l'autre sans
puce ni numéro.
Encadrées par <dl></dl>
Chaque nouvelle ligne de niveau 1 commence
par <dt>
Chaque nouvelle ligne de niveau 2 commence
par <dd>
Les listes hiérarchiques
Exemple
<dl>
<dt>niv1
<dd>niv2
<dd>niv2
<dd>niv2
<dt>niv1
<dd>niv2
<dt>niv1
<dt>niv1
</dl>
Exercice
Écrivez le
fichier
engendrant la
page ci-
contre
Création de lignes horizontales
<hr size="s" width="w|w%" align = "LEFT|
CENTER|RIGHT" color = "#RRVVBB"
noshade>
SIZE : épaisseur en pixel de la ligne
WIDTH : largeur de la ligne. Peut s'exprimer en valeur absolue
(pixels) ou relative (en pourcentage de la largeur de la fenêtre)
ALIGN : alignement à gauche|au centre|à droite dans la fenêtre (à
utiliser si la ligne ne fait pas toute la largeur de la fenêtre)
COLOR : couleur de la ligne. Option valable avec Internet Explorer
NOSHADE : désactivation de l'ombrage de la ligne. Option valable
avec Netscape Navigator
<hr> seul affiche une ligne grise ombrée de 1 pixel
d'épaisseur faisant toute la largeur de la fenêtre
Exercice
Écrivez le
fichier
reproduisant
la page ci-
dessous
Les liens externes.
<a href="adresse à atteindre"
target="fenêtre d'affichage"> </a>
Encadre du texte et/ou une image
Target permet de spécifier un nom de fenêtre
pour l'affichage
Si la fenêtre précisée n'existe pas, elle est
créée
Par défaut l'affichage se fait dans la fenêtre
courante
Les liens externes.
<a href="http//:[Link]/~paris/">
chez moi
</a>
référence une page html que l'on atteint en cliquant sur chez moi. Si le
fichier spécifié n'est pas un fichier HTML, le lien sera un lien de
téléchargement.
<a href="ftp//:…"> ici </a>
référence un fichier à télécharger même si c'est un fichier html.
Les liens externes.
<a href =[Link]
ma boîte aux lettres
</a>
quand on clique sur ma boîte aux lettres
une fenêtre de mail s'ouvre avec
pour destinataire paris@[Link] et
pour objet qcq
Le lien aura la couleur spécifiée dans l'option LINK du BODY,
sauf si le texte matérialisant le lien est inclus dans une balise
<font color> (incluse elle-même dans la balise <a href>)
Le lien peut être fait sur du texte et/ou une image
Exercice
Écrivez le
fichier
corres-
pondant à
la page ci-
dessous
Les liens internes
Un lien interne est un lien qui amène à un endroit spécifique de la page
HTML en cours. Il se construit en deux temps :
•Mise en place d'une étiquette à l'emplacement à atteindre avec la balise
<a name="nom de l'étiquette"> … </a>
•Appel du lien de manière classique, mais où l'adresse de la page à
atteindre est remplacée par le nom de l'étiquette précédée d'un # :
<a href="#nom de l'étiquette"> … </a>
NB : il est possible d'atteindre un emplacement spécifique d'une page
différente de celle où a lieu l'appel de lien.
c'est à dire de combiner les liens externes et internes, en faisant suivre le
nom du fichier HTML par un # et le nom de l'étiquette.
<html>
<head>
</head>
<body>
<p><a href="#heading1">Lien vers le titre 1</a></p>
<p><a href="#heading2">Lien vers le titre 2</a></p>
<h1 id="heading1">Titre 1</h1>
<p>Texte texte texte texte</p>
<h1 id="heading2">Titre 2</h1>
<p>Texte texte texte texte</p>
</body>
</html>
Exercice
Construisez une page HTML identique à
l'exercice précédent en ajoutant :
un lien interne référençant le troisième
élément de la liste que l'on accède en cliquant
sur le mot beau.
Un lien interne référençant le haut de la page
que l'on accède en cliquant sur anonymous.
Les attributs du paragraphe
La commande pour le retour à la ligne est : <BR>
(en HTML, la touche enter du clavier ne permet pas ce retour à la
ligne)
La touche espace ne permet d’effectuer qu’un seul espace.
Pour ajouter d’autres espaces il faut taper à chaque fois:
La commande pour insérer une tabulation est : <UL>… </UL>
La commande pour insérer une ligne horizontale est : <HR>
La commande pour commencer un nouveau paragraphe est :
<P>
On peut définir la position du texte sur la page en le mettant à
gauche, au centre ou à droite:
<P ALIGN=LEFT> Texte </P > justifie le texte à gauche
<P ALIGN=RIGHT > Texte </P > justifie le texte à droite
<P ALIGN=CENTER> Texte </P > centre le texte
(on peut utiliser aussi <CENTER> et </CENTER>
Le style la page web
L'attribut BGCOLOR de la commande <BODY> permet de
modifier la couleur de fond de la page :
<BODY BGCOLOR = #couleur>
Exemple : <BODY BGCOLOR = #FF3366 > un fond de
couleur rose
(On peut également utiliser le nom de la couleur en anglais:
red…)
L'attribut BACKGROUND de la commande <BODY> permet
de mettre un fichier image comme arrière plan de la page
web:
<BODY BACKGROUND = "[Link]" >
Mise en place des images
Balise: <img src="Nom_Du_Fichier">
Attribut Signification Attribut Signification
src URL de l’image à alt Texte alternatif (texte s’affichant en cas
inclure de problème avec l’image
width Largeur de l’image align Alignement de l’image
(facultatif)
height Hauteur de l’image border Contrôle la largeur de la bordure (0 par
(facultatif) défaut
Les images statiques et animées :
<img>
Une image animée se crée en associant plusieurs images (les
formats utilisables diffèrent suivant les logiciels) dans un seul fichier au
format .gif
•L'option src : nom du fichier contenant l'image
•L'option width : largeur de l'image affichée. Si cette option n'est pas
spécifiée, l'image est affichée à sa taille réelle. On indique
soit la valeur en pixel, soit en pourcentage de la taille originale de
l'image.
•L'option height : hauteur de l'image affichée.
Mêmes remarques que pour width
Quand une seule des deux options width ou height est spécifiée,
l'autre est automatiquement calculée en proportion
Les images statiques et animées
L'option alt : texte apparaissant dans une info-bulle
quand la souris est positionnée pendant 1
à 2 secondes sur l'image
L'option border : taille en pixel de la bordure autour de
l'image. Si l'image est un lien et qu'on
ne veut pas voir de bordure de la
couleur spécifiée dans l'option LINK
du BODY, mettre 0
Mise en place des images
- Positionnement du texte par rapport à l’image :
En haut:
<img align="top " src="Nom_Du_Fichier"> texte texte…
Au milieu:
<img align="middle " src="Nom_Du_Fichier">texte
texte…
En bas:
<img align="bottom " src="Nom_Du_Fichier">texte
texte…
581
Mise en place des images
- Positionnement de l’image par rapport au
texte :
Texte texte texte
Image à gauche: Texte texte texte
Texte texte texte
<img align=left src="Nom_Du_Fichier">
Texte texte texte
Image à droite : Texte texte texte
Texte texte texte
<img align=right src="Nom_Du_Fichier">
591
Mise en place des images
- Redimensionnement de l’image :
Balise : <img src="Nom_Du_Fichier" width=X height=Y >
- X et Y sont des nombres entiers représentants la largeur et la hauteur en
pixels.
- Si vous n’utilisez pas ces attributs, l'image sera affichée en grandeur
réelle.
- Ajout d'un cadre à l'image :
Balise : <img src="Nom_Du_Fichier" border=X>
où X est un nombre entier représentant la largeur en pixels du cadre.
601
Mise en place des images
- On peut mettre plusieurs attributs à l'intérieur de
la balise "img" et leur ordre n'est pas important :
Exemple :
<img align=middle src="[Link]" width=250 height=150
border=2 >
- Il faut respecter la casse:
Les systèmes d'exploitation qui gèrent les serveurs web
font la différence entre les majuscules et les
minuscules, ainsi les écritures suivantes sont différentes :
[Link], [Link], [Link], [Link], [Link]
…etc.
611
Les tableaux
<table></table>
<TR></TR> : ouverture et fermeture d'une ligne dans le tableau
(Table Row)
<TD></TD> : ouverture et fermeture d'une cellule (Table Data)
Ne jamais oublier les balises de fermeture, car le tableau pourrait
être désordonné, voire ne pas s'afficher
Les tableaux peuvent être imbriqués, mais il faut toujours qu'il y ait le
même nombre de balises d'ouverture et de fermeture (attention à
l'ordre)
Les tableaux peuvent servir à la mise en page : texte en colonne,
création de menus verticaux sur le coté de la fenêtre. mais si des
attributs de caractères doivent être spécifiés, il faut le faire cellule
par cellule (même si c'est pour tout le tableau )
Exercice
Écrivez le code qui vient et visualisez le résultat
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="STPI, Deug, HTML">
<meta name="Author" content="Stéphane Paris">
<meta name="Generator" content="AceHTML 4 Pro">
<title>TP Bureautique : Deug STPI</title>
</head>
<body bgcolor="silver" text="purple" link="black" vlink="blue"
alink="white" rightmargin=5 title="Le titre du Body c'est... Le corps!">
<table align="center" bgcolor="#FF00FF" bordercolor="#FF0000">
<tr>
<td>pos 1 1</td>
<td>pos 1 2</td>
</tr>
<tr>
<td>pos 2 1</td>
<td>pos 2 2</td>
</tr>
</table>
</body>
</html>
Les options des tableaux
<table>
Les options height, width, align, border,
bgcolor, background comme d'habitude
L'option cellpadding définit l'espace entre le
bord des cellules et leurs contenus (intra
cellulaire)
L'option cellspacing définit l'espace entre
les cellules (inter cellulaire)
Exemple
<HTML>
<HEAD>
<TITLE>Exemple de table</TITLE>
</HEAD>
<BODY BGCOLOR=#fffeac TEXT=#0a0a8a LINK=#ff1614 VLINK=#9414cb>
<TABLE BORDER=6 CELLSPACING=6 CELLPADDING=6 WIDTH=40%>
<TR>
<TD COLSPAN=2 ALIGN=RIGHT>case 1-1 sur deux colones </TD>
<TD ALIGN=CENTER>case1-3 </TD>
</TR>
<TR>
<TD ROWSPAN=2>case 2-1 sur deux lignes </TD>
<TD>case 2-2 </TD>
<TD>case 2-3 </TD>
</TR>
<TR>
<TD>case 3-2 </TD>
<TD>case 3-3 </TD>
</TR>
</BODY>
</HTML>
Les options des lignes <tr>
Les options height, width, border, bgcolor,
background comme d'habitude
L'option align pour un alignement horizontal
centré, justifié, à gauche ou encore à droite
L'option valign permet de positionner
verticalement le tableau
Les options des cellules <td>
Les options height, width, border, bgcolor, background, align,
valign comme pour les lignes mais pour les cellules.
L'option colspan=nombre de cellules fusionnées à l'horizontal.
Permet de disposer du texte sur plusieurs colonnes. Pour que le
tableau s'affiche correctement, il faut que ligne par ligne, le
nombre de cellules soit le même.
L'option rowspan=idem pour les fusions à la verticale
<TD COLSPAN=3>
ROWSPAN=3>
<TD COLSPAN=2>
Exercice
