Programmation web1

Matière : Programmation Web1
Enseignante : Ouroud HENIA

ISET Bizerte 2013/2014
Classe : TI13

Chapitre I : Historique de Internet et
services
I.1 Introduction
Internet est un système d'interconnexion de machines qui constitue un réseau informatique
mondial, utilisant un ensemble standardisé de protocoles de transfert de données. C'est un
réseau de réseaux, composé de millions de réseaux aussi bien publics que privés,
universitaires, commerciaux et gouvernementaux. Internet transporte un large spectre
d'information et permet l'élaboration d'applications et de services variés comme le courrier
électronique, la messagerie instantanée et le World Wide Web.
Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois
confondus par le public non averti. Le World Wide Web n'est pourtant que l'une des
applications d'Internet.

I.2 Définitions
Réseau : Ensemble des ordinateurs et périphériques connectés les uns aux autres. Notons que
deux ordinateurs connectés ensemble constituent à eux seuls un réseau minimal.
Protocole : méthode standard qui permet la communication entre des processus (s'exécutant
éventuellement sur différentes machines), c'est-à-dire un ensemble de règles et de procédures
à respecter pour émettre et recevoir des données sur un réseau.
TCP/IP :Transmission Control Protocol/Internet Protocol» : ensemble des règles de
communication sur internet se basant sur la notion adressage IP, c'est-à-dire le fait de fournir
une adresse IP à chaque machine du réseau afin de pouvoir acheminer des paquets de
données.
Adresse IP :Sur Internet, les ordinateurs communiquent entre eux grâce au protocole IP
(Internet Protocol), qui utilise des adresses numériques, appelées adresses IP, composées de
4 nombres entiers (4 octets) entre 0 et 255 et notées sous la forme xxx.xxx.xxx.xxx. Par
exemple, 194.153.205.26 est une adresse IP donnée sous une forme technique.
Ces adresses servent aux ordinateurs du réseau pour communiquer entre-eux, ainsi chaque
ordinateur d'un réseau possède une adresse IP unique sur ce réseau.
C'est l'ICANN (Internet Corporation for AssignedNames and Numbers, remplaçant l'IANA,
Internet AssignedNumbers Agency, depuis 1998) qui est chargée d'attribuer des adresses IP

1


Classe : TI13

publiques, c'est-à-dire les adresses IP des ordinateurs directement connectés sur le réseau
public internet.
Nom de domaine :Chaque ordinateur directement connecté à internet possède au moins une
adresse IP propre. Cependant, les utilisateurs ne veulent pas travailler avec des adresses
numériques du genre 194.153.205.26 mais avec un nom de domaine ou des adresses plus
explicites (appelées adresses FQDN) du type [www.commentcamarche.net].
Web :On appelle «Web» (nom anglais signifiant «toile»), contraction de «World Wide Web»
(d'où l'acronyme www), une des possibilités offertes par le réseau Internet de naviguer entre
des documents reliés par des liens hypertextes.
Navigateur :c‟est l‟outil de l'internaute, lui permettant de surfer entre les pages web de ses
sites préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de
navigation, d'une barre d'adresse, d'une barre d'état (généralement en bas de fenêtre) et dont la
majeure partie de la surface sert à afficher les pages web.
Exemple : internet Explorer, Mozilla Firefox, Google Chrome…
Site Web : Un site web (aussi appelé site internet) est un ensemble de fichiers HTML stockés
sur un ordinateur connecté en permanence à internet et hébergeant les pages web (serveur
web).
Un site web est habituellement architecturé autour d'une page centrale, appelée «page
d'accueil» et proposant des liens vers un ensemble d'autres pages hébergées sur le même
serveur, et parfois des liens dits «externes», c'est-à-dire de pages hébergées par un autre
serveur.
Site Web statique :site web dont le contenu de ses pages web ne varie pas en fonction de la
demande des internautes.
Site Web dynamique :site web contenant des pages web générées à la demande et leur
contenu varie en fonction des caractéristiques de la demande (heure, adresse IP de l'ordinateur
du demandeur, formulaire rempli par le demandeur, etc.) qui ne sont connues qu'au moment
de sa consultation.
URL (Uniform Resource Locator) : permet d‟identifier de manière unique une ressource sur
le Web. Elle précise le protocole d‟accès, le nom du serveur qui héberge cette ressource et sa
localisation sur le serveur. Exemple : http://fr.wikipedia.org/wiki/Uniform_Resource_Locator
est l‟URL de la page web du site wikipedia décrivant l‟URL.

I.3 Historique d’Internet
1962 : Joseph Liklider publie ses travaux sur les interactions sociales qui seraient possibles
avec un réseau d‟ordinateurs
2


Classe : TI13

1969 : naissance de l‟ARPANET : un réseau décentralisé reliant quatre grands centres
universitaires américains par des câbles 50Kbps, et utilisant le NCP ("Network Control
Protocol")
1972 : Ray Tomlison crée le courrier électronique
1973:Vinton Cerf spécifie le réseau TCP/IP
Fin des années 80 :ARPAnet
Début 1990 : Internet tel que nous le connaissons

I.4 Services d’Internet
I.4.1 World Wide Web
Le concept du Web a été mis au point au CERN (Centre Européen de Recherche Nucléaire)
en 1991 par une équipe de chercheurs à laquelle appartenaient Tim-Berners LEE, le créateur
du concept d'hyperlien, considéré aujourd'hui comme le père fondateur du Web.
Le principe de web repose sur l'utilisation d'hyperliens pour naviguer entre des documents
(appelés «pages web») grâce à un logiciel appelé navigateur. Une page web est ainsi un
simple
fichier
texte
écrit
dans
un
langage
de
description
appelé
HTML (HypertextMarkupLanguage), permettant de décrire la mise en page du document et
d'inclure des éléments graphiques ou bien des liens vers d'autres documents à l'aide de balises.

I.4.2 Courrier électronique
Le courrier électronique, courriel, e-mail, mail (parfois mél), est un service de transmission
de messages écrits et de documents envoyés électroniquement via un réseau informatique
(principalement Internet) dans la boîte aux lettres électronique d‟un destinataire choisi par
l‟émetteur.
Pour émettre et recevoir des messages par courrier électronique, il faut disposer d‟une adresse
électronique et d'un client de messagerie ou d‟un webmail permettant l'accès aux messages
via un navigateur Web.

I.4.3 Internet Relay Chat (IRC)
IRC st un protocole de communication textuelle sur Internet. Il sert à la communication
instantanée principalement sous la forme de discussions en groupe par l‟intermédiaire de
canaux de discussion, mais peut aussi être utilisé pour de la communication de un à un. Il peut
par ailleurs être utilisé pour faire du transfert de fichier.

I.4.4 Messagerie instantanée

3


Classe : TI13

Contrairement au IRC, la messagerie Instantanée vous permet de contacter seulement les
personnes qui vous intéressent. Aussi, pas besoin de se connecter à l'un des serveurs IRC et
d'entrer dans une chambre pour savoir qui est là. En ouvrant le logiciel, vous savez
instantanément si une personne de votre liste de contact est disponible ou pas ou commencer
une conversation.
ICQ, Yahoo Messenger, AOL Instant Messenger (AIM), Microsoft Messenger sont parmi les
logiciels les plus utilisés de ce service.

I.4.5 Téléphonie sur l’Internet
Ce service vous permet d'avoir des conversations par la voix sur l'Internet. C'est l'équivalent
d'interurbains sans payer de frais. Vous payer seulement les coûts d'abonnement du service
d'accès à l'Internet. Ce service ne fait que s'améliorer en qualité.

I.4.6 Vidéo Conférence sur l'Internet
La vidéo conférence est la communication entre les usagers en utilisant de la vidéo et le son.
Avec une petite caméra vidéo et un programme spécialisé, vous pouvez vous connecter à un
serveur qui s'occupe de la communication entre deux ou plusieurs personnes. Le logiciel plus
connu est appelé Skype.

I.5Protocoles d’Internet
Chaque protocole a des fonctions propres et, ensemble, ils fournissent un éventail de moyens
permettant de répondre à la multiplicité et à la diversité des besoins sur Internet.
HTTP (HyperText Transfer Protocol) : protocole mis en œuvre pour le chargement des pages
web.
HTTPS : version sécurisée du HTTP pour la navigation en mode sécurisé.
FTP(File Transfer Protocol) : protocole utilisé pour le transfert de fichiers sur Internet.
SMTP (Simple Mail Transfer Protocol) : mode d'échange du courrier électronique en envoi.
POP3 (Post Office Protocol version 3) : mode d'échange du courrier électronique en
réception.
IMAP(Internet Message Access Protocol) : un autre mode d'échange de courrier électronique.
IRC (Internet Relay Chat) : protocole de discussion instantanée.
SSL ou TLS : protocoles de transaction sécurisée, utilisés notamment pour le paiement
sécurisé.

4


Classe : TI13

Chapitre II : Le langage HTML
II.1 Définition
Le HTML (« HyperText Mark-Up Language ») est un langage dit de « marquage » (de «
structuration » ou de « balisage ») dont le rôle est de formaliser l'écriture d'un document avec
des balises de formatage. Les balises permettent d'indiquer la façon dont doit être présenté le
document et les liens qu'il établit avec d'autres documents.
Le langage HTML permet notamment la lecture de documents sur Internet à partir de
machines différentes, grâce au protocole HTTP.
Le langage HTML est un standard publié par W3C (World Wide Web Consortium).

II.2 Historique de HTML
1991 : naissance du Web et du langage HTML
1993 : première version de HTML : HTML 1.0, navigateur NCSA Mosaîc
1995 : première version officielle de HTML HTML2.0 rfc 1866
Janvier 1997 :HTML 3.2, apports : standardisation des tableaux et un grand nombre
d‟éléments de présentation
Décembre 1997 : HTML4.0 standardise les feuilles de style et les cadres.
2012 : HTML 5 : nouvelles possibilités dans la création d‟applications web avec l‟intégration
d‟éléments mutimédia.

II.3 Structure d’un document HTML
La structure générale d‟un document HTML doit être selon cette allure :

Le document doit être entouré de marqueurs (Angl. “tags”)<html>....</html>
L‟en-tête (“head”) est utilisé pour stocker de l‟information à propos dudocument.
Dans la plupart des cas, il s‟agit uniquement du titre.
Le titre (“title”) du document est utilisé à deux fins:
5


Classe : TI13

Dans la plupart des “browsers”, le titre est affiché dans la barre supérieure de
lafenêtre.
o Le titre est souvent utilisé par les “search robots” pour indexer votre
page.Choisissez donc quelque chose de significatif.
Toute la page HTML proprement dite (ce qui est visible dans le browser) est incluse
dans le corps (“BODY”).
o

II.4 Notions de base
II.4.1 Balise HTML



Une balise est un élément du texte (un nom) encadré par (<) et (>). Exemple :<head>
Les balises HTML ne sont pas sensibles à la casse : pas de différence entre majuscules
et minuscules.
 Les balises fonctionnent par paire afin d‟agir sur les éléments qu‟elles encadrent. La
première balise est dite ouvrant et la seconde est dite fermante. La balise fermante est
précédée par „/‟.
Exemple :
<b> Ce texte est en gras </b> : met le texte encadré en gras.
 Les balises HTML peuvent être uniques. Exemple : <br> représente un retour à la
ligne.
 Les balises peuvent être imbriquées de manière hiérarchique. Le chevauchement n‟est
pas accepté.
Exemple :
<i><u>Bonjour</u>tout le monde</i>(Bonjour tout le monde)
<i><b>Ceci est un exemple</i>incorrect </b> (incorrect)

II.4.2 Attribut HTML
Un attribut est un élément, présent au sein de la balise ouvrante, permettant de définir des
propriétés supplémentaires. Les attributs se présentent la plupart du temps comme une paire
clé=valeur, mais certains attributs ne sont parfois définis que par la clé.
Exemple :
<p align="right">Exemple de paragraphe</p>

Dans cet exemple, dans la balise de paragraphe <p>, on a spécifié l‟attribut
align="right">qui permet d‟aligner à droite le texte du paragraphe.

6


Classe : TI13

II.5 Titres, séparateurs et paragraphes
II.5.1 Titres
Il existe 6 niveaux de titre dans HTML.
Un retour à la ligne est automatiquement inséré après un titre.
Syntaxe: <Hn>...</Hn>
où n est compris entre 1 et 6 (H1 est le plus grand titre possible)
Exemple
<H1>Titre de niveau 1</H1>
<H4>Titre de niveau 4</H4>
Attribut:
ALIGN sert àspécifier l’alignement horizontal d’un titre.
Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"
<h1 align="center">Texte du titre centré</h1>

II.5.2 Paragraphe
a/ Paragraphe simple
Le marqueur de paragraphe "p" produit un double retour de ligne.
Syntaxe: <p>...</p>
A l'intérieur d'un paragraphe, les espaces, tabulations et retours chariot comptent pour un seul
espace.
Attribut:
ALIGN sert à spécifier l’alignement horizontal du paragraphe.
Syntaxe: ALIGN="LEFT ou CENTER ou RIGHT"
Exemple
<p align="center">Ceci est un premier paragraphe centré</p>
<p align="right">Ceci est un paragraphe aligné à droite</p>

b/ Paragraphe en retrait
Le marqueur “blockquote” décale le paragraphe à droite.
Syntaxe: <blockquote>...</ blockquote>
Exemple

7


Classe : TI13

<blockquote>ce paragraphe a un retrait à droite</blockquote>

c/ Paragraphe formaté
Le marqueur “pre" est utilisé lorsqu‟on désire afficher du texte avec un caractèrenonproportionnel (“monospaced font”). Un “m” prendra autant de place qu‟un“i”.
Lorsqu‟on insère plusieurs espaces à la suite, ceux-ci sont maintenus à l‟affichage(ce qui n‟est
pas le cas avec le texte normal)
Syntaxe: <pre> ... </pre>
Exemple
<pre>
ligne 1
ligne2 précédée d’espaces
</pre>

d/ Adresse et signature
“Address” est utilisé pour les indications relatives à l‟auteur, à la date de créationet à la
version du document.
Syntaxe: <address> ... </address>
Exemple
<address>
Ce document a été créé par les étudiants de l’ISET de Bizerte
Dernière modification: 12/1/2011
</address>

II.5.3 Séparateur
a/ Retour à la ligne
Le marqueur “br” effectue un simple retour de ligne.
Il n‟est pas nécessaire de le fermer par </br>.
Syntaxe: <br>
Attribut :
CLEAR permet de forcer l‟alignement du texte. Ce paramètre est particulièrementutile
lorsqu‟on l‟utilise conjointement avec des images. Il introduit des retours delignes jusqu‟à ce
que la marge droite, gauche ou les deux soient libres.
CLEAR="LEFT ou RIGHT ou ALL"
<br clear=left>
<br clear=all>

8


Classe : TI13

b/ Ligne horizontale
Le marqueur “hr” insère une barre horizontale.
Syntaxe: <hr>
Attributs :
 SIZE : spécifie l‟épaisseur de la barre horizontale en pixels. La valeur par défaut
est 1.
 WIDTH : spécifie la longueur de la ligne, soit en pixels, soit en pourcentage de la
largeur de la fenêtre.
 ALIGN : spécifie l‟alignement de la barre
ALIGN="LEFT ou RIGHT ou CENTER"
 NOSHADE : ne prend pas de valeur. Lorsqu‟il est présent dans le marqueur “hr”
l‟effet est une ligne pleine sans ombrage.
Exemple :
<hr size="3" width="200" align="center" noshade>

c/ La balise DIV
La balise DIV permet de regrouper des éléments
On peut associer des attributs communs aux éléments contenus entres les balises<div>
<div align="center">
<h1> Introduction </h1>
<p>
Bonjour
</p></div>
Cette balise est surtout utile pour associer des styles
<DIV class="cours">
.....
</DIV>

II.6 Mise en forme de caractères et caractères spéciaux
II.6.1 Les balises de style
Les balises de style modifient la typographie du texte. Elles peuvent être imbriquées dans
d'autres balises de style de la même façon qu'on le ferait avec un traitement de texte.
Balise de style
Effet Visuel
<ABBREV> Abréviation
<ACRONYM> Acronyme
<B>
Met la police en gras
<BIG>
Police plus grande
<CITE>
Citation
Instruction
<CODE>
9


Classe : TI13

<DEL>
<DFN>
<EM>
<I>
<INS>

Texte supprimé mais qui reste présent
Définition d'instance
Emphase
Italique
Nouveau texte inséré à cet endroit

<KBD>
<Q>

Clavier - Suite de caractères devant être tapés tel quel

<S>
<SAMP>

Comme strike (barré)
Exemple

<SMALL>
<STRONG>

Police plus petite

Encadre le texte par des guillemets

<STRIKE>

Forte accentuation rendue par du gras
Texte barré (comme S)

<SUB>
<SUP>

Texte en Indice
Texte en Exposant

<TT>

Caractère de machine

<U>

souligné

II.6.2 Police
Pour modifier la police de votre texte il suffit d‟utiliser la balise: <font>.
Syntaxe : <font
texte</font>

face=

« … »color=

« … »

size= « … »>.votre

Attributs :
 Face : spécifie la police utilisée.
 size : spécifie la taille de la police.
 color : spécifie la couleur de la police soit en spécifiant le nom de la couleur soit le
code de la couleur en "#RRVVBB" (RR, VV et BB représentent respectivement un
nombre hexadécimal entre 00 et FF pour le Rouge, le Vert et le Bleu).
Exemple :
<font face="Times New Roman, Times,
size="+2" >exemple de police </font>

serif"

color="#FF0000"

II.6.3 Caractères spéciaux

10


Classe : TI13

Le standard HTML demande de respecter le codage des caractères ASCII 7 bits, c'est-à-dire
que les caractères accentués ne sont pas autorisés. Il faut pour cela utiliser un codage
particulier.
Exemple :
Caractère Code
"
&

"
&

Space

 

à

à

E

&egrave ;

E

é

II.7 Les listes
II.7.1 Liste à puce
Pour créer une liste à puce, on dispose de la balise <ul>
Pour spécifier le titre de la liste, on utilise<lh>
Les éléments de la liste sont réalisés grâce à la balise <li>
Syntaxe:
<ul>
<lh>…</lh>
<li>…</li>
<li>…</li>
…
</ul>
Exemple :
<ul>
<lh>Titre de la liste</lh>
<li>Elément 1</li>
<li>Elément 2</li>
</ul>

II.7.2 Liste numérotée

11


Classe : TI13

Syntaxe: <ol> ... </ol>
<ol>
<lh>Titre de la liste</lh>
<li>Elément 1</li><li>Elément 2</li>
</ol>

II.7.3 Liste de définition
Le marqueur « dl »
Délimite une zone de liste de définition qui contient des termes "dt" et
desdescriptions "dd"
Syntaxe: <dl> ... </dl>
Le marqueur « dt »
Introduit un nouveau terme de définition.
Syntaxe: <dt> ... </dt>
Le marqueur « dd »
introduit une description du terme de définition. Le résultat à l’écran est
undécalage du texte vers la droite.
Syntaxe: <dd> ... </dd>
<dl>
<th>Titre de la liste
<dt>Terme 1</dt>
<dd>Définition du terme 1</dd>
<dt>Terme 2</dt>
<dd>Définition du terme 2</dd>
....
</dl>

II.7.4 Attributs de liste
Il existe des attributs spécifiques aux listes:
Attribut
COMPACT
PLAIN
SEQNUM

Valeur

Effet Visuel
resserre l'interligne
supprime les puces
définit le premier numéro
12


Classe : TI13

START

définit le premier numéro
repart du numéro où il s'était arrété
à la liste précédente
numérotation chiffrée (par défaut)

CONTINUE
1

numérotation en capitales
A
numérotation en bas de casse
TYPE (pour les listes ordonnées)

a
I

numérotation en chiffres romains (I, II, III, IV
...)

i
TYPE (pour les listes nonordonnées)

numérotation en chiffres romains en bas de
casse
circle puce circulaire
square puce carrée
disc
puce en disque

II.7.5 Combinaison de liste
Les listes peuvent être emboîtées les unes dans les autres, il suffit pour cela de définir
unélément d’une liste comme étant une autre liste.

<ol>
<li> Achats à faire
<ul>
<li> 2 litres de lait </li>
<li> 1 kg de pain mi-blanc</li>
</ul>
</li>
<li> Recette
<dl>
<dt>Pain</dt>
<dd>Il faut de la farine et de l’eau, de la levure.</dd>
<dt>Lait</dt>
<dd>Si vous êtes en ville, aucune chance ... Il faut
trouverune vache </dd>
</dl>
</li>
<li> Dernier élément numéroté </li>
</ol>

13


Classe : TI13

II.8 Les liens
Les liens peuvent être de deux types :
- externes: un pointeur du document mène vers un autre document
- internes: un pointeur renvoie à une section du même document.

II.8.1 Le marqueuer<a>
Un lien se définit par le marqueur <a ...> suivi de l‟attributHREF=”” quidéfinit l‟adresse du
document vers lequel le lien conduit. Il se termine par </a>.
Le texte ou l‟image qui sont insérés entre les marqueurs de début et de fin sont lesparties
actives du lien ("mots_sensibles" ci-dessous) et déclencheront lechargement du document
lorsqu‟on clique dessus.
Syntaxe: <A HREF="adresse">mots_sensibles</A>
<A HREF="http://www.isetb.rnu.tn/">ISET Bizerte</A>
<A HREF="/welcome.html">Retour à l’acceuil</A>
<A HREF="../index.html">Remonter d’un niveau</A>

II.8.2 Lien externe vers un autre document HTML
Ce type de lien permet de pointer vers un document référencé par une adresse URLou par un
chemin relatif.
Ce document peut être un document HTML ou tout autre type de fichier.(postscript,
sons, images etc ...).

II.8.3 Lien interne
Les liens internes permettent de construire des tables de matières et des renvois àl‟intérieur
d‟un texte
Un lien interne pointe vers une ancre, c‟est à dire un endroit à l‟intérieur d‟undocument défini
par un nom.
14


Classe : TI13

Il faut définir deux choses pour un lien interne :
 L’ancre interne
Syntaxe: <A NAME="nom_de_l’ancre"></A>
Exemple :
<A NAME="bas_de_la_page"></A>
 Le lien vers l’ancre
Le lien proprement dit se définit avec le marqueur “a” suivi dehref= « #... »
Syntaxe: <A HREF=”#nom”>mots_sensibles</A>
Exemple :
<A HREF="#bas_de_la_page>Aller en bas</A>
Exemple : Lien interne et table des matières
....
<ahref=”#partie1”>Première Partie</a>
<a href=”#partie2”>Deuxième Partie</a>
....
...
<aname=”partie1”></a>
<h1>Partie 1</h1>
....
...
<h1><a name=”partie2”>Partie 2</a></h1>
.....
Il est également possible d‟utiliser les ancres dans les liens externes. Il faut alorsspécifier
l‟ancre vers laquelle pointe le lien en ajoutant #_$_à la fin de l‟URL.
Exemple :Ancre et lien externe
<a
href=”http://www.isetb.rnu.tn/cours/exemple.html#partie2”>Deux
ième Partie</a>
Et dans le document exemple.html on trouve la définition de l‟ancre suivante:
<aname=”partie2”>
<h2>Partie 2</h2>

II.8.4 Lien et adresses relatives
a. Ressource située dans le même répertoire que la page d'appel
La valeur prise par l'attribut href est simplement le nom du fichier, par exemple <a
href="index.html">.
15


Classe : TI13

b. Ressource située dans un sous-répertoire du répertoire contenant la page d'appel
Il suffit de citer la suite des sous-répertoires jusqu'au fichier ressource, par exemple
href="archives/2001/18072001.html".
c. Ressource située dans un répertoire contenant la page d'appel
Il faut remonter successivement chaque répertoire par "../". Dans cet exemple, le répertoire
visé est le supérieur hiérarchique de deuxième rang (le grand-père) :
href="../../index.html".
d. Ressource située dans un répertoire situé dans une branche latérale
Il faut remonter au répertoire commun par "../" puis redescendre la bonne branche, par
exemple href="../../produits/convecteurs/rh1200x.html".

II.8.5Lien vers des services Internet
a/ Lien pour l’envoie d’ e-mail
Un tel lien lance automatiquement l‟application de messagerie électronique en incluant lenom
du destinataire.
<A HREF="MAILTO:adresse_correspondant"> ancre </A>
ou
<A
HREF="MAILTO:adresse_correspondant?Subject=Objet_du_message">
ancre </A>
<a
href=”mailto:tounsi.mohamed@yahoo.fr”>Envoyez
message</a>

moi

un

A HREF="MAILTO: tounsi.mohamed@yahoo.fr?Subject=Coucou">Contact !!</A>

b/ Lien pour télécharger un fichier
Ce type de lien est utilisé pour donner accès à un dialogue de téléchargement de fichier.
Le protocole indiqué dans l‟URL est, en l‟occurrence, le protocole de transfert de fichiers
FTP.
<a
href=”ftp://tecfa.unige.ch/pub/software/”>Liste
des
logiciels disponibles</a>

II.9Les Tableaux
Un tableau doit respecter les quelques règles suivantes :
16


Classe : TI13






Le tableau est encadré par les balises <TABLE> et </TABLE>.
Le titre du tableau est encadré par <CAPTION></CAPTION>
Chaque ligne est encadrée par <TR></TR> (Table Row, traduit par ligne du tableau).
Les cellules d'en-tête sont encadrées par <TH></TH> (pour Table Header : En-tête
de tableau)
 Les cellules de valeur sont encadrées par <TD></TD> (Table Data: Donnée de
tableau)
Exemple :
<TABLE BORDER="1">
<CAPTION> Voici le titre du tableau </CAPTION>
<TR>
<TH>Titre A1 </TH>
<TH>Titre A2 </TH>
<TH>Titre A3 </TH>
<TH>Titre A4 </TH>
</TR>
<TR>
<TH>Titre B1 </TH>
<TD> Valeur B2 </TD>
</TR>
</TABLE>

 Attributs de table:
Attribut
border="x"

Rôle
Epaisseur du cadre

bgcolor=couleur Couleur des cellules
Border color=

Couleur des bordures

Height

taille en hauteur d’un tableau

width=" "

taille en largeur d’un tableau

Align

left, right, center

cellpadding="y" Espace situé entre les bordures du tableau et le contenu des cellules
cellspacing="y"

Taille de la bordure entre les cellules

 Attributs de cellule <TD> et <TH>
align="letf / center / right / justify alignement horizontal
17


Classe : TI13

/ char"
valign="top / bottom / middle /
alignement vertical,
baseline"
width="x"

largeur de la cellule,

height="y"

hauteur de la cellule,

colspan="x"

définit une cellule dont la largeur est x
fois celle de la colonne de base (fusion
des x colonnes adjacentes),

rowspan="y"

définit une cellule dont la hauteur est y
fois celle de la ligne (fusion des y lignes
adjacentes),

bgcolor="couleur"

définit la couleur de fond,

background="url"

image de fond.

 Attributs de ligne<TR>
valign = "top / bottom / baseline / middle" alignement vertical
align = "right / center / left "

alignement horizontal

bgcolor="couleur"

couleur de fond de la cellule

Les attributs sont appliqués pour toutes les cellules de la ligne sauf si un attribut de
<TD> donne un autre ordre.
Exemple : Regroupement de cellules en lignes ou en colonnes
<TABLE border="3" cellpadding="2">
<CAPTION align="bottom">Titre
</CAPTION>
<TR>
<TH align="left">Script</TH>
<TH align="left" colspan="2">Exécution</TH>
</TR>
<TR>
<TD>CGI</TD>
<TD rowspan="2">par le</TD>
<TD>serveur</TD>
</TR>
<TR>
<TD>javascript</TD>
<TD>client</TD>
</TR>
</TABLE>

18


Classe : TI13

II.10 Insertion d’image
Les formats d‟image affichables par les browsers sont *.gif et *.jpg (*.png pour les récents)
Pour avoir des images à l‟intérieur d‟un document HTML, on utilise la commande “img”:
<imgsrc=”URL” align=”alignement” alt=”commentaire” width=n
height=n hspace=n vspace=n border=n>
attributs :
src = est obligatoire et contient un URL ou un chemin relatif vers un fichier de format
.gif ou .jpg ou .png
align : permet de spécifier l‟alignement par rapport au texte : ALIGN = "TOP ou
BOTTOM ou MIDDLE ou RIGHT ou LEFT"
alt :contient le commentaire que les personnes utilisant un browser textuel (sans
images) voient à la place de l‟image.
Width et height : se réfèrent à la largeur et à la hauteur de l‟image (en pixels).
hspace et vspace : permet de spécifier la distance horizontale et verticale en pixels
entre le texte environnant et le bord de l‟image.
Border : permet de créer un cadre autour de l‟image. La largeur de la bordure est
exprimée en pixels.

II.11 Les cadres (Frames)
Les frames sont les cadres créés dans la fenêtre d‟un navigateur. Chaque cadre peut recevoir
un fichier HTML différent. Ce principe est surtout utilisé pour des barres de navigations, des
hauts de page (où sont placés des publicités etc…).
Afin
de
créer
un
site
contenant
des
cadres,
il
suffit de créer un fichier contenant l'agencement des cadres : ce fichier HTML a pour
particularité d'avoir un conteneur <FRAMESET> à la place du jeu de balises <BODY>.
C'est cette balise qui définit les cadres par leur dimension en pixels ou en pourcentage (%).
Le code du jeu de cadres sera toujours de cette forme
<HTML>
<HEAD></HEAD>
<FRAMESET >
<FRAME> les pages HTML a charger.
</FRAMESET>
<NOFRAMES>
<BODY>
Le texte à afficher dans le cas où le navigateur ne supporte pas les
cadres.
</BODY>
</NOFRAMES>
</HTML>

Le fichier FRAMESET :
Comme un tableau, un fichier frameset se construit en lisant les cadres de haut en bas, et
de gauche à droite.
19


Classe : TI13

Exemple1 :
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAME SRC="frame2.htm" NAME="droite">
</FRAMESET>

Exemple2 :
<FRAMESET COLS="20%,
80%">
<FRAME SRC="frame1.htm" NAME="gauche">
<FRAMESET ROWS="50%, 50%">
<FRAME SRC="frame2.htm"
NAME="droit_haut">
<FRAME SRC="frame3.htm"
NAME="droit_bas">
</FRAMESET></FRAMESET>

Attributs de la balise <FRAMESET>

cols="pixels / %, pixels / %"

Crée des colonnes dont la largeur peut être
spécifiée en pixels ou en pourcentage de la fenêtre
totale. Les dimensions pour chaque colonne sont
séparées par des virgules. (On note aussi qu'il est
possible d'indiquer le signe "*" pour indiquer que la
colonne occupe l'espace restant).

rows="pixels / %, pixels / %"

Crée des cadres horizontaux (lignes). Il n'est pas
possible d'utiliser cols et rows dans le même
frameset.

framespacing="n"

Indique l'espace entre les cadres.

frameborder="yes/no"

Indique
ou non

bordercolor="code
héxadécimal"

Couleur de la bordure des cadres (ici, les noms des
16 couleurs standard ne sont pas possibles).

border="n"

Indique la taille de la bordure

si

le

cadre

a

une

bordure

Attributs de la balise<FRAME> :
src="URL"

Définit l'emplacement de la page à afficher dans le
cadre

20


Classe : TI13

name="texte"

Définit un nom qui permettra d'afficher un autre
document dans le cadre gâce à l'attribut Target

scrolling="yes / no / auto"

Permet ou non l'affichage d'une barre de défilement
(Auto laisse le navigateur décider de son utilité)

marginheight="pixels"

marges disposées en haut et en bas du cadre.

marginwidth="pixels"

marges disposées de chaque côté du cadre.

frameborder="yes/no"

Détermine si les cadres auront ou non une bordure

border=n

Taille de l'espace entre les cadres (uniquement pour
Netscape)

noresize

Interdit à l'utilisateur de redimensionner les cadres (Ce
n'est pas la valeur par défaut)

Désigner un cadre avec un lien hypertexte
Pour faire afficher des liens dans un des cadres, il suffit d'utiliser l'attribut target dans la balise
<A HREF ..>pour spécifier le nom du cadre qui a été spécifié dans la balise <FRAME> par
l'attribut NAME.
Par exemple:
<A HREF="page.htm" TARGET="gauche">
Attribut target :
Valeur

Action

_self

Affiche la cible dans le même cadre que le lien

_parent

Affiche la cible dans le cadre de niveau supérieurdans le cas où plusieurs fenêtres
du navigateur sont ouvertes)

_blank Affiche la cible dans une nouvelle fenêtre
_top

Affiche la cible dans la fenêtre entière du navigateur

II.12 Les formulaires
Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous
pouvez ainsi créer une certaine interactivité avec vos visiteurs.

II.12.1 La balise <form>
21


Classe : TI13

La déclaration de base d‟un formulaire se fait par:
la balise <form>
la spécification des paramètres “action”, “method” et parfois “name”
<FORM ACTION=”URL” METHOD=GET ou POST>
....
</FORM>

La balise<form>contient toutes les autres balises du formulaire. Il peut contenir aussi d'autres
balises : <p>, <table>, etc., permettant la présentation du formulaire.
Attributs :
Attributs

action

Effet

Valeur(s)

URL du script qui URL, 2 types possibles :
traite les données
http : pour un traitement immédiat.
recueillies.
Cet
mailto : dans le cas d'un envoi à un courrier
attribut
est
électronique, en vue d'un traitement différé.
obligatoire.
get

: valeur par défaut. Les données sont
adressées sous la forme d'une liste de valeurs
accolées à l'URL avec interposition d'un
séparateur particulier (point d'interrogation).
post : les données sont adressées sous la forme
d'une liste nom/valeur accolées à l'URL mais ici,
le script doit lire les données par défaut afin
d'atteindre les véritables données du formulaires.

method

Indique sous quelle
forme
vont
être
codées
les
informations
envoyées.

onsubmit

Le code à exécuter Chaîne de caractères renvoyant vers une fonction script
lors de la soumission. de traitement (par exemple une fonction JavaScript).

Le code à exécuter
Chaîne de caractères renvoyant vers une fonction script
onreset lors de la remise à
de traitement (par exemple une fonction JavaScript).
zéro du formulaire.
name

Le
nom
formulaire.

du

target

Spécifie la cible du
Une liste de codage de caractères, séparée par des
retour
après
espaces.
traitement du serveur

Une chaîne de caractères.

22


Classe : TI13

Exemples
Exemple pour un formulaire d'envoi de courrier électronique sur le serveur de Multimania :
<formmethod="get" action="/cgi-bin/mailer">.

Exemple pour un formulaire classique sans l'aide de script CGI :
<forum action="mailto:webmaster@allhtml.com" method="post">.

II.12.2 La balise <INPUT>
Cette balise sert à spécifier comment s'effectue la saisie du formulaire : par cases à cocher,
boutons radio, texte libre, etc. Tous ces éléments de saisie sont décrits à l'aide d'une seule
balise : la balise <input>. C'est son attribut type qui permet de préciser s'il s'agit de cases à
cocher, boutons radio, texte libre...
L'attribut type peut prendre les valeurs suivantes :
text, password, checkbox, radio, submit, reset, image, button,
hidden, file

<INPUT TYPE=”...” NAME=”...” VALUE=”...” CHECKED
SIZE=”...” MAXLENGTH=”...”>
Attributs généraux
Attributs

Effet

Valeur(s)

Name

Le nom du champ.

Une chaîne
caractères.

de

Alt

Une courte description.

Une chaîne
caractères.

de

Disabled

Désactive l'élément, qui apparaît dès lors en grisé.

Un booléen.

accesskey

Définit une touche du clavier permettant d'accéder
au champ de formulaire. La combinaison
Touche du clavier
"ALT+touche" a le même effet que l'activation du
champ.

Tabindex

Fixe la position de l'élément dans l'ordre séquentiel Valeur numérique
des tabulations.
entière

Un script à exécuter quand le curseur est positionné
Une chaîne
onfocus, onblur sur le champ (onfocus), ou bien qu'il le quitte
caractères.
(onblur).
Onchange

Un script à exécuter quand contenu du champ a été Une

chaîne

de

de
23


Classe : TI13

changé.

caractères.

Les types de balises <INPUT>
a. Champ de saisie :
L'attribut type vaut type="text". La balise permet alors à l'utilisateur de saisir une ligne
de texte. Les attributs utiles pour ce type sont :
size : un nombre entier, qui définit la taille visible du champ en nombre de caractères.
maxlength : un nombre entier, qui définit le nombre maximum de caractères

autorisés.
value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone
de saisie.
readonly : un booléen. La modification du contenu n'est pas permise.
L'attribut name est obligatoire pour ce type de champ.
Exemple :
<strong>Nom</strong><br>
<input type="text" name="nom" size="25">

b. Case à cocher
L'attribut type vaut type="checkbox". Les attributs utiles pour ce type sont :
value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple
nom="valeur") (a plus de sens dans le cas radio suivant).
checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activée, la

case est cochée par défaut.
Exemple :
<input type="checkbox" name="domaine" value="Info">Informatique
<input type="checkbox" name="domaine" value="Math">Mathématique
<input type="checkbox" name="domaine" value="Ph">Physique

c. Bouton radio
L'attribut type vaut type="radio". Outre la présentation (les cases sont rondes et non plus
carrées), il existe une grande différence entre les cases à cocher et les boutons radio : les
boutons radio qui portent le même name s'excluent mutuellement, le cochage de l'un décoche
les autres. Les attributs utiles pour ce type sont :

24


Classe : TI13

value : une chaîne de caractères, obligatoire, valeur passée au serveur (couple
nom="valeur").
checked : un booléen (s'utilise sous la forme checked="checked"). S'il est activé,

la

case est cochée par défaut.
Exemple :
<strong>Sexe</strong>
<input type="radio" name="sexe">Masculin
<input type="radio" name="sexe">Féminin<p>

d. Attacher un fichier
L'attribut type vaut type="file". Il s'agit de donner la possibilité à l'utilisateur du formulaire
de joindre un fichier à son envoi. L'attribut utile pour ce type est value , une chaîne de
caractères, qui indique le nom du fichier à attacher par défaut.
Exemple :
<strong>Donner votre photo</strong>
<input type="file" name="photo" value= "photo.jpg">

e. Cacher des données
L'attribut type vaut type="hidden". Pourquoi cacher des données ? Il s'agit plutôt de faciliter
le traitement des données recueillies par le serveur en fournissant le nom du formulaire, l'URL
du formulaire, et d'autres indices inutiles à l'utilisateur mais très utiles au classement des
données. Ces données deviennent obligatoires lorsque vous faîtes héberger vos pages Web.
Les attributs utiles pour ce type sont :
value

: une chaîne de caractères. Valeur cachée à envoyer au serveur, obligatoire.

Par exemple, avec le script CGI chargé de la gestion de l'envoi de courrier électronique sur
Multimania :
<input type="hidden" name="TO" value="login@multimania.com">

: cette

valeur indique sur quelle adresse électronique le formulaire sera envoyé.
<input type="hidden" name="FROM" value="login@multimania.com">

: cette

valeur indique la provenance du formulaire.

25


Classe : TI13

<input type="hidden" name="SUBJECT" value="FORMULAIRE">

: Cette valeur
indique le nom du formulaire (le sujet du courrier), utile si vous avez plusieurs
formulaires, cela permet de trier son courrier.
<input type="hidden" name="GOTOURL"
value="http://www.multimania.com/login/reponse.html"> : cette valeur
indique l'URL complète de la page HTML à afficher après l'envoi du formulaire.

f. Mot de passe
L'attribut type vaut type="password". A l'identique que le type text, mais les caractères
tapés sont affichés sous forme d'astérisques. Mais attention : le mot de passe est envoyé en
clair dans le message final. Aucune méthode de chiffrement n'est appliquée : la confidentialité
ne se limite qu'à l'instant de la saisie. Les attributs utiles pour ce type sont les mêmes que ceux
du type text :
size : un nombre entier, qui définit la taille visible du champ en nombre de caractères.
maxlength : un nombre entier, qui définit le nombre maximum de caractères

autorisés.
value : une chaîne de caractères, qui permet d'afficher un texte par défaut dans la zone
de saisie.
Exemple :
<strong>Mot de passe</strong><br>
<input type="password" size="25">

g. Soumission de données
L'attribut type vaut type="submit". Les attributs utiles pour ce type sont :
value

: une chaîne de caractères. Légende du bouton, par défaut Submit.

Une variante est possible en utilisant le type image : type="image". Le bouton d'envoi est
alors... une image. Les attributs utiles pour ce type sont :
src

: une chaîne de caractères. URL de l'image à utiliser.

Exemple :
<input

type="submit"

value="Enregistrer

les

donnees">

h. Réinitialisation d'un formulaire
L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué, remet à leurs valeurs par
défaut l'ensemble des champs du formulaire. L'attribut utile pour ce type est value , une
chaîne de caractères qui indique la légende du bouton, valant par défaut Reset.
26


Classe : TI13

Exemple :
<input type="reset" value="Effacer les donnees">

II.12.3 La balise <textarea>
Elle permet aux utilisateurs de votre site de laisser un commentaire ou de taper un texte
quelconque.

Attributs
Attribut
name
rows
cols
readonly

Effet

Valeur(s)
Une chaîne
caractères.

Nom de l'élément.

de

et Nombre de lignes et de colonnes de la zone de texte. Ces
Un nombre entier.
attributs sont obligatoires.
La modification du contenu n'est pas permise.

Un booléen.

Remarque : le texte se trouvant à l'intérieur des balises <textarea> et </textarea> sera le
texte par défaut.
Exemple :
<strong>Commentaire :</strong><br>
<textareaname="comment"
rows="3">Ecrire

votre

cols="35"
commentaire

ici</textarea>

II.12.4 La balise <select>
Il s'agit d'une liste de propositions ou d'options parmi lesquelles l'utilisateur doit opérer un
choix. Ce choix peut être unique ou multiple. Les options possibles sont décrites pour chacune
d'entre-elles dans un conteneur <option> (la balise fermante </option> est obligatoire). Il y
a autant de balises <option> que d'options.
Exemple :

27


Classe : TI13
<select name="select" name="mois">
<option selected="selected">Janvier</option>
<option>Février</option>
<option>Mars</option>
<option>Avril</option>
<option>Mai</option>
<option>Juin</option>
<option>Juillet</option>
<option>Aout</option>
<option>Septembre</option>
<option>Octobre</option>
<option>Novrmbre</option>
<option>Décembre</option>
</select>

Attributs de la balise <select>
Attribut

Effet

Valeur(s)

name

Nom de l'élément.


size

Le nombre d'options accessibles.

Un nombre.

multiple

Permet à plusieurs options
simultanément sélectionnées.

d'être Un booléen. Par défaut, une seule option
peut être sélectionnée.

Balise <option>
Chaque "option" est une possibilité de choix dans le menu select. Cette balise possède les
attributs suivants :
Attribut

Effet

Valeur(s)

value

Ce qui apparaît dans la liste d'options du menu. Si cet attribut
Une chaîne de
n'est pas présent, c'est le contenu de l'élément <option> luicaractères.
même qui est affiché.

selected

Spécifie l'option sélectionnée par défaut.

Un booléen.

disabled


Un booléen.

label

Une étiquette désignant l'option choisie dans le menu.

Une chaîne de
caractères.

Balise <optgroup>

28


Classe : TI13

Cette balise permet de rassembler en catégories les éléments <option>, pour les faire
apparaître de manière ordonnée dans le menu.
Attribut

Effet

Valeur(s)

label

Une étiquette désignant le groupe d'options choisies dans Une
chaîne
le menu.
caractères.

disabled


de

Un booléen.

Exemple
<select name="select" name=”mois”>
<optgroup label="Semestre 1">
<option selected="selected">Janvier</option>
<option>Février</option>
<option>Mars</option>
<option>Avril</option>
<option>Mai</option>
<option>Juin</option>
</optgroup>
<optgroup label="Semestre2">
<option>Juillet</option>
<option>Aout</option>
<option>Septembre</option>
<option>Octobre</option>
<option>Novrmbre</option>
<option>Décembre</option>
</optgroup>
</select>

II.12.5 La balise <label>
Cette balise permet d'associer à un élément de formulaire des informations relatives à son
contenu ; cette information est utile notamment pour les navigateurs destinés aux malvoyants.
Attributs
Attribut

Effet

Valeur(s)

for

Renvoie à l'élément de formulaire spécifié par le même Une chaîne de
caractères.
attribut id.

accesskey

Définit une touche du clavier. La combinaison "ALT + Touche
touche" a le même effet que l'activation du champ.
clavier

du

29


Classe : TI13

Un script à exécuter quand le curseur est positionné sur le Une chaîne de
caractères.
champ (onfocus), ou bien qu'il le quitte (onblur).

onfocus,
onblur

II.2.6 La balise <button>
Cet élément permet d'insérer un bouton dans un formulaire. Cela est également possible avec
la balise <input>, mais <button> permet un plus large choix d'options. Il est
malheureusement moins bien accepté par les "vieux" navigateurs.
Attributs
Attribut

Effet

Valeur(s)

name

Le nom du bouton.

value

Valeur envoyée au serveur. Une chaîne de caractères.

type


submit
button
reset

Type de bouton.

(valeur par défaut)

Exemples :
<buttonname="soumet"

value="modifier">Modifier

l'information</button>

<buttonname="continue"

value="continuer">Continuer

l'application</button>

<button><imgsrc="checkmark.gif"
<button

alt="✔"></img>Sauvegarder</button>

type="reset"><imgsrc="x.gif"

alt="✘"></img>Remettre

à

zéro</button>

Exercice :
Ecrire le code HTML du formulaire suivant :

30


Classe : TI13

31

Classe : TI13

Chapitre III : HTML5
III.1 Introduction
Cooperation entre le World Wide Web Consortium (W3C) et le Web Hypertext Application
Technology Working Group (WHATWG).
WHATWG travaillait sur de nouveaux formulaires et applications et le W3C sur XHTML 2.
En 2006, ils ont décidé de coopérer pour créer HTML5 avec forte implication des industriels
et fabricants de navigateurs.
Les navigateurs en pointe : Opera (un des développeurs d‟Opera est à l‟origine de HTML5),
ceux basés sur WebKit (Chrome, Safari, y compris sur mobiles), Firefox (un peu de retard)

III.2 Structure générale d’un document HTML5
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<link rel="stylesheet"

href="style.css">

<script src="script.js"></script></head>
<body>
...  ...
</body>
</html>

Avec :
•
•
•

Doctype simple à mémoriser,
Plus de « type= » dans la balise <link>, utilisation de « rel=» à la place
– Nombreuses valeurs possibles pour rel : stylesheet, author, icon, prefetch, next,
prev, etc.
Plus de « type= » dans la balise <script> non plus
– <script src="script.js"></script> suffit…

III.3 Formulaires en HTML5
•
•
•

Enorme évolution, alors que les formulaires n‟avaient quasiment pas changé depuis 1997
Ajout de nombreux validateurs qui auparavant nécessitaient du JavaScript,
Ajout de nombreux types nouveaux pour les champs de formulaire, auparavant fournis par
des bibliothèques JavaScript
32


•
•
•

Classe : TI13

De nombreux nouveaux types de champs <input> ont été introduits, tous ne sont pas
encore supportés, même par les versions les plus récentes des navigateurs
color, date, datetime, datetime-local, email, month, number, range, search, tel, time,
url, week.
Nous allons voir des exemples de chacun de ces champs :

III.3.1 Le champ <input type=color>
Exemple : Choisissez une couleur: <input type="color" name="favcolor" />

III.3.2 <input type=date>
Exemple : Anniversaire: <input type="date" name="bday" />

III.3.3 <input type=datetime-local>
Permet de choisir la date et l’heure
Support idem type=date
Exemple : Anniversaire : <input type="datetime-local“ name="bdaytime" />

III.3.4 <input type=time>
Heure du rendez-vous :<input type="time"name=“rdv_time" />
33


Classe : TI13

III.3.5 <input type=week>
Choisissez la semaine : <input type="week" name=“no_semaine" />

III.3.6 <input type=month>
<input type="month" name="bdaymonth" />
Idem date mais permet de choisir juste le mois

III.3.7 <input type=email>
E-mail: <input type="email" name="useremail" />
Intérêt : poppe un clavier contextualisé sur mobile ou tablette





Attributs implicites “required”, “invalid” etc.
Possibilité de styler la saisie
Vrai aussi pour les autres champs <input>
Validation + messages d‟erreurs. Parfois tooltips lors de la saisie

34


Classe : TI13

 Et lors de la soumission

III.3.8 <input type=number>
•
•

<input type="number" name="quantity" min="1" max="5" />
Attributs possibles : max, min, step, value (valeur par défaut)

III.3.9 <input type=range>
<input type="range" name=“n" min="1" max="10" />

Attributs : idem que ceux de type=number
Poppe un clavier contextuel sur mobile
•

Exemple avec feedback
<input
id="slider1"
type="range"
in="100"
onchange="printValue('slider1','rangeValue1')"/>
<input id="rangeValue1" type="text" size="2"/>

max="500"

step="10"

Etunefonction JavaScript
<script>
function
var
var
x.value
}
</script>

x
y

printValue(sliderID,
=
=
=

textbox)
{
document.getElementById(textbox);
document.getElementById(sliderID);
y.value;

35


Classe : TI13

III .3.10 <input type=tel>
•

Possibilité de mettre des patterns et un placeholder
<input type="tel" placeholder="(555) 555-5555“pattern="^(?d{3})?[-s]d{3}[s]d{4}.*?$" />

III.3.11 <input type=search>
<label
for="mysearch2">Enter
your
search
string
<input id="mysearch2" type="search" placeholder="search">

here

:

</label>

36


Classe : TI13

Chapitre IV: Les feuilles de style CSS
IV.1 Introduction
Le CSS (Cascading Style Sheets) est utilisé pour la mise en forme des pages web. Il consiste à
regrouper dans un même document des caractéristiques de mise en forme associées à des
groupes d'éléments. Il suffit de définir par un nom un ensemble de définitions et de
caractéristiques de mise en forme, et de l'appeler pour l'appliquer à un texte. Il est ainsi
possible de créer un groupe de titres en police Arial, de couleur verte et en italique.
Le but de CSS est de séparer les données de la mise en forme. Il permet d'obtenir une
présentation homogène sur tout un site en faisant appel sur toutes les pages à une même
définition de style.
Les spécifications des feuilles de style deviennent une recommandation du consortium W3C
en décembre 1996 sous l'appellation CSS1 pour Cascading Style Sheets, level 1. Ce même
niveau 1 a été révisé en janvier 1999.
Entre-temps, ces spécifications ont été élargies sous la forme du CSS2 pour Cascading Style
Sheets, level 2 en mai 1998. Elles précisent entre autres :
des styles différents pour les médias différents (écran, impression, synthétiseur de
parole, braille...) ;
les polices de caractères téléchargeables ;
le positionnement des éléments HTML (appelé par ailleurs CSS-P).
La dernière version de CSS est CSS3 qui est en cours de développement depuis 2010.

IV.2 Niveaux d’insertion de CSS
Le code CSS peut être placé à 4 endroits différents dans la page.
Interne : Dans la page HTML
Externe : Dans un fichier indépendant
Dans l'élément (balise) HTML lui-même
A partir d‟un style importé

IV.2.1 Dans le code HTML de la page
Mettre le code CSS dans la page HTML, entre les deux balises <head>et </head>
Une feuille globale va se déclarer dans la tête du document, entre les balises HEAD. Elle va
s'appliquer globalement à toutes les balises du document qu'elle a défini.
<HTML>
<HEAD>

37


Classe : TI13

<STYLE type="text/css">
<!—code css -->
</STYLE>
</HEAD>
<BODY>

La balise <STYLE> avertit le navigateur que l'on va utiliser des feuilles de style.
L'attribut type="text/css" informe que ce qui suit est du texte et qu'il s'agit de cascading
style sheets (css).

IV.2.2 Dans un document séparé : fichier CSS
Une feuille liée va se déclarer à part, dans un fichier avec une extension .css qui sera mis à
côté des autres documents dans le répertoire du site web. Cette feuille de style sera valable
pour toutes les pages du site qui l'appelleront dans les balises HEAD. C'est un outil très
puissant pour uniformiser la mise en pages d'un grand nombre de documents.
Principe :
On crée d'abord, dans le répertoire du site, un fichier avec l'extension .css soit « styles.css »
qui contiendra toutes les feuilles de style.
body

{background-image: home.gif;}
LI
{font: 13px Verdana;}
p
{font: 14px Verdana; font-weight: bold;}
H1
{font: 16px Arial;font-weight: bold;color=black;}
H2
{font: 14px Arial;font-weight: bold;color=black;}

Ensuite, on crée une page soit page.htm avec dans la <HEAD> un lien vers ce fichier CSS :
<HTML>
<HEAD>
<LINK rel=stylesheet type="text/css" href="styles.css">
</HEAD>

Commentaires :
La balise <LINK> avertit le browser qu'il faudra réaliser un lien.
L'attribut rel=stylesheet (sans s et sans guillemets) précise qu'il y trouvera une feuille de
style externe.
L'attribut type="text/css" précise que l'information est du texte et du genre cascading style
sheets (css).
L'attribut classique de lien href=" ... " donne le chemin d'accès et le nom du fichier à lier.

IV.2.3 Dans la balise HTML
Il possible de mettre un style directement dans une balise HTML
<HTML>
<HEAD>
...
</HEAD>

38


Classe : TI13

<BODY>
...
<BALISE Style="style:valeur;"> ... </BALISE>
...
</BODY>
</HTML>

Exemple :
<HTML>
<BODY>
<H1
style="font-family:
</BODY>
</HTML>

Arial;

font-style:

italic">blabla</H1>

IV.2.4 Style importé
Les recommandations du W3C offrent une dernière façon d'inclure des feuilles de style dans
un document: en important des feuilles de style. Il est en effet possible d'importer des feuilles
de style externes au niveau de la déclaration du style de document, en insérant la commande
@IMPORT immédiatement après la balise style :
<HTML>
<HEAD>
<STYLE type="text/css">
<!-@IMPORT URL(url de la feuille à importer);
Définition des styles du document;
-->
</STYLE>
</HEAD>
<BODY></BODY>
</HTML>

IV.3 Notion de feuille de style en cascade
L‟abréviationCSS signifie Cascading Style Sheet ou encore Feuille de style en cascade.
Pourquoi « cascade » ?
Ce mot « cascade » fait référence à la méthode de résolution des conflits : puisqu'on peut
placer plusieurs feuilles de style dans un même document (en lien, dans le head, en ligne dans
la balise) les instructions de style successives peuvent s'opposer. Les ordres de style arrivent
donc « en cascade ». Comment résoudre les conflits ?
Comme pour le HTML, le

dernier qui parle a raison. On aura donc la hiérarchie :

feuille de style extérieure << feuille de style dans le head<< style en attribut dans la balise

39


Classe : TI13

IV.4 Syntaxe
IV.4.1 Structure générale
Construction d'une règle
Une feuille de style est une suite de règles selon cette structure :

selecteur{ propriété : valeur }
Une règle a deux parties :
Un sélecteur ; dans l'exemple suivant il s'agit de h2 ;
Une déclaration ; c'est une suite de paires propriété: valeur séparées par un point virgule, le tout placé entre accolades. Ici dans cet exemple il s'agit de {text-align:
center ; color: black}.
Exemple
h2
{
text-align : center;
color : black;
}

Tous les titres de niveau 2 auront leur texte centré et de couleur noire.

Commentaires
Il est possible d'ajouter des commentaires dans une feuille de style. Une zone de
commentaires commence par les caractères /* et se termine par les caractères */. Elle peut
s'étendre sur plusieurs lignes. Par exemple :
/* Mise en forme des éléments h2 */
h2
{
text-align : center;
color : black;
}

IV.4.2 Sélecteurs simples
Balise
Il s'agit du sélecteur le plus simple possible, où le sélecteur reprend le nom de l'élément
auquel la propriété s'applique :

40


Classe : TI13

p
{
text-align : justify;
color : black;
}

En utilisant l'attribut style, l'exemple précédent devient :
<p style="text-align: center; color: black">(...)</p>
Il est possible de grouper les balises à l'aide de virgules :
h2, h3, ul
{
text-align :center;
color : green;
}

Dans cet exemple, tous les titres de niveaux 2 et 3 et les listes non ordonnées seront centrés et
de couleur verte.

Classe
L'attribut classest un attribut qui peut apparaître dans n'importe quelle balise.
Exemple :
.truc
{
color :red;
}
.machin
{
color : blue;
}

Noter le point devant le sélecteur.
<p class="truc">Ceci est un paragraphe d'introduction.</p>
<table summary="Un tableau peu informatif" class="machin">
<tr>
<td>Et voici</td>
<td>un</td>
<td class="truc">tableau</td>
</tr>
<tr class="truc">
<td>de deux lignes</td>
<td>et</td>
<td class="truc">trois colonnes</td>
</tr>
</table>
<ol class="truc">
<li>Et ceci</li>
<li class="machin">est une</li>

41


Classe : TI13

<li class="truc">liste</li>
</ol>

Il est possible, également, de spécifier que certains éléments seulement d'une classe donnée soient
concernés. Par exemple, le code suivant permet de sélectionner tous les éléments div de classe menu.
S'il y a un élément p de classe menu, il ne sera pas concerné et conservera sa couleur de fond par
défaut :
div.menu
{
background-color :gray;
}

Il est également possible d'appliquer plusieurs classes à un élément. Ainsi, si dans la feuille de
style on écrit...
.appartient_a_dupont
{
color : red;
}
.vehicule
{
font-style : italic;
}

... le code HTML
<span class="vehiculeappartient_a_dupont"> bicyclette</span>

affichera le mot bicyclette en italique et en rouge.

Identifiant
L'attribut idest un attribut qui peut aussi apparaître dans n'importe quel élément. La très
grande différence avec l'attribut classest qu'une valeur de idne peut être prise qu'une seulefois
dans toute la page Web. C'est un identifiant : par nature, sa valeur est unique.
Exemple :
<p id="monpar">Ceci est un paragraphe d'introduction.</p>
<ol id="maliste">
<li>Et ceci</li>
<li id="item2">est une</li>
<li class="truc">liste<imgsrc="images/chapeaurond.gif" alt="Vive la

42


Classe : TI13

Bretagne!" height="20" width="40" id="monimage"></li>
</ol>

On peut alors associer plusieurs règles à chaque id de la manière suivante :
#monpar, #monimage
{
color : red;
border : solid 0.5em blue;
}
#liste1, #monimage
{
background-color : yellow;
}
#maliste
{
background-color : yellow;
color : orange;
}
#item2
{
font-variant : small-caps;
font-style : oblique;
}

IV.4.3 Sélecteurs complexes
Sélecteur contextuel
Prenons un exemple :
h2em
{
color : blue;
}

Cette règle ne s'appliquera que sur le contenu des éléments em lorsqu'ils seront eux-mêmes à
l'intérieur d'un titre de niveau 2 (h2). Autrement dit, la consigne s'applique aux éléments em
dans le contexte d'un élément h2.
Syntaxe : les sélecteurs simples sont séparés par des espaces. L'enchâssement est possible
avec tous les types de sélecteurs, balise, identifiant, classe comme l'illustrent les exemples
suivants :
.copyright h4
{
color :blue;
}
#toto b
{
font-size : large;

43


Classe : TI13

}
ulul
{
list-style : lower-alpha;
}

Les regroupements (signifiés par le séparateur virgule) restent possibles :
h1 b, h2 b, b em
{
color : yellow;
}

Pseudo-classes
Nous allons prendre l'exemple des liens. Un lien peut être dans trois états différents :
actif (lors du clic de la souris) ;
à visiter ;
déjà visité.
Pour les éléments a, on appelle pseudo-classes ces trois états possibles. Ce sont des classes
prédéfinies. Voici un exemple :
a:active
{
text-decoration : overline;
}
a:link
{
color : blue;
font-style : italic;
}
a:visited
{
color : green;
font-weight : bold;
}

La syntaxe est donc [selecteur]:[pseudo-classe] {declaration}
Une pseudo-classe intéressante est la pseudo-classe hover : elle permet d'affecter un style à
un élément, lorsque celui-ci est survolé par la souris. Un usage classique consiste à désactiver
le soulignement automatique des liens, qui est le comportement par défaut, et de ne le
réactiver qu'au passage de la souris :
a
{
text-decoration : none;
}
a:hover
{

44


Classe : TI13

text-decoration : underline;
}

Pseudo-éléments
CSS1

décrit plusieurs pseudo-éléments :
first-line modifie le style de la première ligne d'un paragraphe.
first-letter modifie le style de la première lettre d'une phrase.
first-child modifie le style du premier élément-enfant du sélecteur
after modifie le style de ce qui suit l'élément.
before modifie le style de ce qui précède l'élément.

courant.

Les trois derniers ne sont pas supportés par Internet Explorer.
Exemple :
p:first-letter
{
color : red;
font-size : 200%;
font-weight : bold;
}

L'exemple précédent permet de colorer en rouge, doubler la taille et mettre en gras la première
lettre de tous les paragraphes.

9. Unités
Syntaxe
Il ne faut laisser aucun blanc entre le nombre et l'unité. Une longueur peut être précédée d'un
signe + ou -.
Unités absolues de longueur
Unité

Notation

inch (pouce) in

Conversion
1in=2,54cm

centimètre

cm

millimètre

mm

point

pt

1pt=1/72in=0,352778mm

pica

pc

1pc=12pt=4,233mm

Table 1. Unités absolues.
Exemples d'utilisation :
45


Classe : TI13

h1
{
margin :0.5in;
}
h2
{
line-height : 3cm;
}
h3
{
word-spacing : 4mm;
}
h4
{
font-size : 12pt;
}
h5
{
font-size : 1pt;
}

Le point et le pica sont utilisés pour la taille des caractères.
Unités relatives de longueur
Unité Notation
Em

Em

xex
height
pixel

px

Conversion
1em

est la hauteur d'un caractère (si la hauteur d'un caractère est fixée par
l'auteur à 10pt alors 1em=10pt, si elle est fixée à 12pt alors 1em=12pt).
1ex

est la taille de la lettre 'x' minuscule.

1pixel (pictureelement) : le plus petit élément sur un écran d'ordinateur.
Cette unité dépend de l'écran et de son paramétrage.
Table 2. Unités relatives.

Exemples d'utilisation :
h1
{
margin :0.5em;
}
h2
{
line-height : 1ex;
}
h3
{

46


Classe : TI13

font-size : 15px;
}

Pourcentages
C'est une fraction de la longueur d'un autre élément : largeur de l'écran, hauteur des caractères
ou toute autre grandeur dépendant du contexte. Exemples d'utilisation :
p
{
line-height : 120%;
}
td.gauche
{
width : 33%;
}

L'interligne des paragraphes vaut 120% de la hauteur des caractères, tandis que les cellules de
classe gaucheoccuperont 33% de la largeur du tableau où elles se trouvent.

Couleurs
Les couleurs se codent de la même manière qu'en HTML, mais il est également possible de
spécifier explicitement le codage RGB :
une des seize couleurs standard : aqua, black, blue, fuchsia, gray, green,
lime, maroon, navy, olive, purple, red, silver, teal, white et yellow.
#rrggbb (par exemple, #00cc00).
#rgb (par exemple, #0c0).
rgb(x1,x2,x3), où x1, x2 et x3 sont des entiers compris entre 0 et 255 inclus (par
exemple rgb(33,45,127)).
rgb(x%,y%,z%) où x, y et z sont des nombres compris entre 0.0 et 100.0 inclus (par
exemple rgb(56%,33%,0%)).

Les balises DIV et SPAN en CSS
Il faut pouvoir dans un même paragraphe appliquer des styles différents à des morceaux
de texte, c'est à cela que servent les balises <SPAN> et <DIV>
o

<SPAN>

La balise <SPAN> sert à appliquer des styles à des morceaux de paragraphe.
Elle
s'utilise
aussi
bien
avec
ID
qu'avec
CLASS.
Sa syntaxe est la suivante :
<SPAN class=Nom_de_la_classe> Texte </SPAN>
o

<DIV>

47


Classe : TI13

Au lieu de s'appliquer à quelques mots dans un paragraphe, la balise DIV s'applique à un
bloc, c'est-à-dire à un ou plusieurs paragraphes.
La syntaxe de la balise DIV est la suivante :
<DIV class=important> paragraphes </DIV>

48

Programmation web1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a Programmation web1

Similar a Programmation web1 (20)

Programmation web1