Cours de Conception Web (Enregistré Automatiquement)

COURS DE LABO INFORMATIQUE 2/Module de conception web
1. OBJECTIF DU COURS
1
1.1. Objectif général
Ce cours vise à initier les étudiants de deuxième graduat
informatique de gestion de concevoir les pages web.
1.2. Objectifs spécifiques
A la fin de ce cours, l’étudiant devra être capable :
De définir les concepts de base sur le web ;
De créer un page web avec le HTML ;
D’arranger les pages avec le CSS ;
De dynamiser les pages web avec le JavaScript ;
2. CONTENU DU COURS
CHAP I GENERALITES SUR LE WEB
CHAP II LANGAGE HTML
CHAP III LANGAGE CSS
CHAP IV LANGAGE JAVASCRIPT
3. METHODOLOGIE D’ENSEIGNEMENT
1. Exposés interactifs
2. Lectures personnelles, recherche sur internet et travaux individuels
et en groupe ;
4. STRATEGIE D’EVALUATION
a) Les travaux de recherche en groupe et individuel à présenter en
terme d’exposé ;
b) Travaux dirigés improvisés (TD) ;
c) Participation individuelle au cours ;
d) Interrogation sur table ;
e) Examen sur table.
9 avril 2019
5. NOTICE BIBLIOGRAPHIQUE
Ir Placide MWEPU : Concepteur des systèmes d’information
E-mail :plaidemwepu@gmail.com
Contact :0997721950/ 0820680397
1. mathieu Nebra, Reussir son site web avecXHTML et CSS, édition EYROLLES,
2
paris 2007.
2. mathieu Nebra, Apprenez à créer votre site Web avec HTML5 et CSS 3,
édition EYROLLES, paris 2013.
3. www.ccim.be/ccim328/vb/index.html.
4. www.ccim.be/ccim328/vb/index.html.
9 avril 2019

Contact :0997721950/ 0820680397
CHAP I GENERALITES SUR LE WEB

3
I.1. Vue d’ensemble d’Internet
I.1.1. Introduction
Internet : vient du mot anglais internetwork c.-à-d. un réseau

international d’ordinateurs (plus précisément un réseau des réseaux
d’ordinateurs).
Au début de l'informatique, des scientifiques ont mis au point des

ordinateurs (ordinateur de Von Newman).
Un ordinateur (computer en anglais) : est une machine capable de

réaliser automatiquement des opérations arithmétiques et logiques à des fins
scientifiques, administratives, de gestion d’entreprise,… à partir de
programmes définissant la séquence de ces opérations.
Il y avait plusieurs générations d’ordinateurs en fonction de

l’avancée technologique. Il y avait essentiellement des ordinateurs (gros et
mini ordinateur) ensuite les micros ordinateurs ou les ordinateurs personnels à
partir des années 1980.
Les gros ou mini ordinateurs sont destinés aux entreprises et aux

administrations. Des terminaux (un terminal = écran + clavier) sont connectés
à ces ordinateurs pour permettre à plusieurs utilisateurs de réaliser des taches
différentes. La caractéristique principale des ces ordinateurs est leur
fonctionnement en multiprogrammation et multitâches.
L’apparition de l’ordinateur personnel (PC-Personal Computer) a

permis de vulgariser l’informatique pour qu’elle touche même les bureaux et
les domiciles.
Les scientifiques ont eu l’idée, par la suite de les relier les ordinateurs
personnels et les autres ordinateurs entre eux afin qu'ils puissent échanger des
9 avril 2019
données, c'est le concept de réseau. Il a donc fallu mettre au point des

liaisons physiques entre les ordinateurs pour que l'information puisse circuler,

Contact :0997721950/ 0820680397
mais aussi un langage de communication pour qu'il puisse y avoir un

4
réel échange, ce langage est appelé protocole.
Des réseaux hétérogènes (de natures différentes) se sont donc

développés à travers le monde; des personnes ont décidé donc de relier
ces réseaux entre eux (des universités par exemple, des sociétés, des
administrations, l'armée, etc.). Les protocoles ont donc évolué pour
permettre la communication entre tous ces réseaux pour former le réseau des
réseaux le plus vaste, formant petit à petit une gigantesque toile d'araignée
que l'on appelle Internet.
I.1.2. Définition de l’Internet
Internet est un ensemble de réseaux interconnectés utilisant une

suite protocolaire appelée TCP/IP (Transmission Control Protocol/Internet
Protocol) pour échanger des informations à travers le monde. En termes
simples : Internet est un immense réseau d’ordinateurs qui peuvent
communiquer entre eux en utilisant TCP/IP.
1.1.3. Origine de l’Internet
Le réseau ARPANET (Advanced Research Projects Agency Network) est

le premier réseau mondial de communication par paquet, crée au milieu
des années 1960s et patronné par le 3 ministère de la défense américaine.
C’est sur ce réseau que les protocoles TCP/IP ont été développés
u milieu des années 1970s, puis unifiés sur tout le réseau. Les scientifiques ont
pris ensuite le contrôle de ce réseau, ce qui leur a permis de communiquer
plus facilement entre eux sur l’avancée de leurs travaux, et à partir de 1995,
Internet s’est ouvert au grand public.
Sur Internet, de nombreux protocoles sont utilisés, ils font partie d'une
suite de protocoles qui s'appelle TCP/IP. TCP/IP repère chaque ordinateur
9 avril 2019
par une adresse appelée adresse IP qui permet d'acheminer les données
à la bonne adresse. Puis on associe à ces adresses des noms de domaine

Contact :0997721950/ 0820680397
(le nom de la machine dans un domaine) pour une utilisation plus

5
facile de la navigation Internet.
I.1.4. Les services offerts par Internet
Sur le plan pratique, Internet est un outil capable de nous rendre un

certain nombre de services. Ces services sont réalisables à travers les
différents protocoles de l’Internet (Les protocoles de la couche application
TCP/IP).
IRC (Internet Relay Chat ) : pour discuter en direct (chat) avec des
gens du monde entier. Le dialogue s’effectue par échange de texte,
mais il est possible de dialoguer aussi en temps réel avec la voix et la vidéo
(vidéoconférence).
http (ou World Wide Web ou www ou tout simplement le web)
pour accéder à des pages web. Le web est l’application Internet la
plus populaire. Grace à un navigateur web (browser), un utilisateur
(internaute) peut lire des pages web stockées sur un ordinateur
serveur situé n’ importe où dans le monde.
ftp (File Transfert Protocol) pour le transfert électronique de fichiers
entre des machines distantes. Avec FTP on peut charger des fichiers sur
des ordinateurs serveurs connectés à Internet, ou télécharger des fichiers
sur le poste client.
telnet (Connexion à un ordinateur distant) : tout utilisateur d’Internet
peut travailler à distance sur une machine, sur laquelle il dispose d’un
compte utilisateur et dont il a accès. Il peut utiliser Telnet ou d’autres
programmes de contrôle à distance (rlogin, rsh…)
SMTP , POP et IMAP: pour la messagerie électronique (ou mail)
o SMTP (Simple Mail Transfer Protocol) pour l’envoi du courrier.
o POP (Post Office Protocol) permet à l’utilisateur de récupérer les
9 avril 2019
messages qu’il a reçu sur le serveur de messagerie hébergeant sa

boite aux lettres en les déplaçant sur son ordinateur local.

Contact :0997721950/ 0820680397
o IMPAP (Internet Mail Access Protocol) un autre protocole qui permet

6
aussi de consulter notre boite aux lettres sur le serveur de messagerie.
o La boite aux lettres est aussi un moyen de stockage de courrier et les
pièces jointes (les fichiers joints aux différents mails).
…
On assigne à chacun de ces protocoles un numéro (le port) qui est

transmis lors de la communication (la transmission est effectuée par
petits paquets d'information). Ainsi, il est possible de savoir à quel
programme correspond chaque petit paquet :
Les paquets HTTP arrivent sur le port 80 et sont transmis au

navigateur Internet à partir duquel la page a été appelée.
Le port 21 est le n° de port utilisé par défaut par le protocole FTP.
Les paquets IRC arrivent sur le port 6667 (ou un autre situé
généralement autour de7000) et sont transmis à un programme client
de chat tel que mIRC (ou autre).
I.15.. Avantages de l’Internet
Accès à l'information d’une manière continue et à partir de n’importe

quel point du monde et ce pour un coût d’accès limité.
Communication sous toutes formes (d'une personne à une autre,
d'une personne à un groupe, d'un groupe à un autre, d'un groupe à
une personne) à partir d'un même outil.
Échanger tous types de données numérisées (documents, dessins,
photos, son, vidéo, logiciels, etc.).
Permettre le commerce électronique grâce à des échanges sécurisés.
Permettre l’enseignement/apprentissage à distance en synchrone ou
en asynchrone.
I.1.6. Fonctionnement de l’Internet

9 avril 2019
Internet est un réseau basé sur le modèle client / serveur :
L'ordinateur client, utilise un logiciel spécifique (le navigateur : par

exemple Google Chrome, Mozilla Firefox ou Microsoft Internet explorer)
Contact :0997721950/ 0820680397
pour aller chercher l'information numérique auprès d'un autre ordinateur

7
distant : le serveur.
Le serveur, ou hôte, stocke les données numériques sur des disques durs et
les envoie, à la demande, sur l'ordinateur client. Consultation d'une page
Web :
1. Action de l'utilisateur dans le navigateur (clic lien).
2. Requête HTTP du navigateur avec adresse.
3. Réponse HTTP du serveur avec document HTML.
4. Interprétation et affichage du navigateur.
5. Le système des noms de domaine.
Le système des noms de domaine ou DNS (Domain Name System)
est le système d'adressage des serveurs connectés à Internet. Il
permet d’établir une relation entre l'adresse numérique d'un serveur
(adresse IP) et une adresse logique. Chaque organisation ou particulier
peut déposer un nom de domaine.
Nommage des ressources Internet
Classes de secteurs d’activités :

• .com commercial
• .edu éducatifs
• .int international
• .mil militaire
• .net réseau de fournisseurs d’accès
Domaines par code pays (en dehors des USA), le code ISO du pays :
• .fr France
• .uk Royaume unie
• .dz Algerie
• ….
9 avril 2019
Le paiement d'un forfait annuel garantit la protection du nom de

domaine.

Contact :0997721950/ 0820680397
Se connecter au serveur Google, on utilise le nom de la machine comme

8
suit : http://www.google.com/Protocole du web le serveur Google
s/domaine domaine root(racine).
I.1.7. Connexion à Internet
Pour se connecter à Internet, il existe plusieurs méthodes :
La connexion par modem en utilisant le réseau téléphonique

analogique (RTC).
L'accès direct avec une ligne dédiée à haut débit, active en
permanence, reliant deux points (généralement une entreprise
importante et un fournisseur d'accès). On parle de l'ADSL ou du
câble. La carte réseau est l'élément de l'ordinateur qui permet de
se connecter à un réseau par des lignes spécialement prévues
pour faire transiter des informations numériques. Le modem permet,
lui, de se connecter à un réseau par l'intermédiaire des lignes
téléphoniques, qui ne sont pas prévues à cet effet à l'origine mais qui
restent le moyen de communication le plus répandu. A la carte
réseau est associée une adresse IP, permettant de caractériser
l'ordinateur sur le réseau.
L’accès à partir d’un point d’accès sans fil (wifi).
L’accès par satellite…
I.2. Le web
I.2.1. Différence entre l’Internet et le web
Le web n’est pas Internet. Internet comme nous l’avons vu est un

vaste ensemble de réseaux interconnectés, « le réseau mondial » ou « le
réseau des réseaux ».
Le web n’est qu’une application parmi les applications mises en œuvre

9 avril 2019
sur Internet. Il est associé au protocole http qui permet de lire des
pages web d’un serveur et les afficher sur le navigateur du client.

Contact :0997721950/ 0820680397
I.2.2. Origine du web

9
Le web a vu le jour en 1989. C’est Tim-Berners-Lee informaticien au
CERN en Suisse qui a défini un moyen simple et efficace pour consulter les
documents scientifiques partagés sur un réseau informatique. Les travaux de
Tim-Berners et son équipe ont aboutit à l’invention du protocole http (le
protocole du web) et du langage HTML (le langage du web).
I.2.3. Contenu du web
World Wide Web (ou WWW ou Web) est constitué de milliards de

documents électroniques liés les uns aux autres, comme les fils d'une toile
d'araignée.
Ces documents sont stockés sur des serveurs, répartis dans le monde
entier.
Le web est devenu un support d'édition électronique international. Il
devient de plus en plus aussi une zone de commerce électronique.
ATTENTION : il n'existe pas de contrôle centralisé sur le web : n'importe qui

peut déposer de l'information sans subir de contrôle ou de vérification! Dans
tous les cas, il faut chercher à vérifier la crédibilité, la pertinence, la qualité et
l'actualisation de l'information.
I.2.4. Les caractéristiques du web
Navigation hypertexte : des marques de renvoi (appelés liens

hypertexte) permettent de passer vers d’autres parties du document ou
vers un autre document. Ce mode de navigation est simple et intuitif. Il
est l’origine du succès du web.
I.2.5. Les pages web
Une page web est un document électronique écrit dans un langage

9 avril 2019
informatique appelé HTML (HyperText Markup Language).

Contact :0997721950/ 0820680397
Une page peut contenir du texte, des graphiques, de la vidéo, des

10
animations, du son et des éléments interactifs tels que des formulaires à
remplir directement sur l'ordinateur.
Chaque page possède une adresse unique, appelée URL (Uniform
Ressource Locator) pour identifier son emplacement sur le serveur (ex :
http://www.google.fr/).
Les pages web contiennent souvent des liens hypertextes (textes
ou images) qui renvoient sur d'autres pages web.
I.2.6. Les sites web
Un site web est un ensemble de pages web reliées entre elles et

traitant d'un même thème (personne, entreprise, organisation ...).
La première page d'un site est la page d'accueil (Home page). Elle sert
le plus souvent de sommaire et indique le contenu du site, elle
contient des liens hypertexte sur lesquels il suffit de cliquer pour
accéder aux autres pages (souvent appelé index.html, index.php ou
default.php).
Un site web est hébergé sur un serveur web appelé aussi serveur http
parce qu’il utilise le protocole (programme ) http pour fournir des
pages web en réponse à des requêtes fournis par des clients web.
Pour naviguer sur le site web :
o On peut cliquer sur les liens hypertexte (souligné et de couleur) ou
sur une image ou un dessin à zone sensible (le curseur prend la
forme d'une main).
o Ou bien, on peut saisir l'URL d'une page ou d'un site web dans
la zone saisie adresse du logiciel de navigation.
o Au lieu de dire « naviguer sur Internet » on utilise « surfer sur le web »
o Un navigateur web (browser) est nécessaire pour naviguer sur
9 avril 2019
le web. Il fait l’interface entre le client web et le serveur web. La

barre d’adresse du navigateur permet à l’utilisateur d’indiquer sous
forme d’URL, l’adresse de la page web qui veut voir afficher.

Contact :0997721950/ 0820680397
Chap II LANGAGE HTML

11
Pour créer un site web, on doit donner des instructions à l 'ordinateur. Il
ne suffit pas simplement de taper le texte qui devra figurer dans le site
(comme on le ferait dans un traitement de texte Word, par exemple), il faut
aussi indiquer où placer ce texte, insérer des images , faire des liens entre
les pages , et c… et le langage qui nous permettra de faire tout cela est
le langage HTML.
II.1. DEFINITION
HTML(Hypertext Markup language) : est un langage de description

qui nous permet de décrire l’aspect d’un document, d’y inclure des
informations variées (textes, images, sons, animations etc…) et d’établir des
relations cohérentes entre les informations grâce aux liens hypertextes.
II.2. AVANTAGES
Les avantages du langage HTML sont nombreux :
 Peux couteux : en effet un simple éditeur de texte suffit pour écrire

ses premiers documents HTML.
 Relativement facile à aborder.
 Il représente en outre un bon moyen de dépasser les problèmes de
compatibilité entre des systèmes d’exploitation de formats
informatiques différents.
II.3. BREF HISTORIQUE
Le terme markup se réfère aux marques, aux annotations manuscrites

placées par l'auteur sur un document pour préciser à l'imprimeur comment il
doit être présenté. Avec l'apparition des ordinateurs et des
photocomposeuses, ces marques ont été intégrées dans le texte mais
chaque matériel de photocomposition réclamait son propre langage
9 avril 2019
"markup" Au début des années 80, le CGA (Graphics Communications

Association) a mis au point le premier langage markup généralisé baptisé
GenCode. Au même moment, un comité de normalisation ainsi publiait le

Contact :0997721950/ 0820680397
standard Generalized Markup Language (GML). En décembre 1986, les deux

12
comités ont unis leurs efforts pour définir le standard SGML (Standard
Generalized Markup Language) accepté par l'ISO (International Standard
Organization) sous le numéro 8879.
Jusqu’à 1990 les principales applications Internet étaient le courrier

électronique, listserv, telnet et FTP. En 1990 l’université de Mac Gill
(Montréal ) introduisit ARCHIE, un outil de recherche FTP pour l’Internet. En
1991 l’université du Minessota proposa GOPHER. En 1992, Tim Berners-Lee un
physicien du CERN, développa les protocoles du World Wide Web. Il créa le
HTML, issu d’un sous ensemble du SGML en s’appuyant sur les travaux de Ted
Nelson qui furent à l’origine du terme hypertexte(1965).
C’est en 1993 que l’explosion de l’Internet eu lieu avec la sortie du

navigateur (en anglais "browser") MOSAIC du NCSA.
II.4. LES BALISES ET LEURS ATTRIBUTS
II.4.1. LES BALISES
Les pages HTML sont remplies de ce qu’on appelle des balises.

Celles-ci sont invisibles à l’écran pour vos visiteurs. Mais elles permettent
à l’ordinateur de comprendre ce qu’il doit afficher. Les balises se
repèrent facilement. Elles sont entourées de <chevrons>, c’est- à –dire
des symboles. Elles indiquent la nature du texte qu’elles encadrent.
On distingue deux types de balises : les balises en paires et les balises

orphelines.
1. Les balises en paires
Elles s’ouvrent , contiennent du texte et se ferment plus loin. Voila à

quoi elles ressemblent.
9 avril 2019

Contact :0997721950/ 0820680397
2. Les balises orphelines

13
Ce sont de balises qui servent le plus souvent à insérer un élément à
un endroit précis. Il n’est pas nécessaire de délimiter le début et la fin de
l’image.
II.4.2. les attributs
Les attributs sont les options des balises. Ils viennent les compléter
pour donner des informations supplémentaires. Les attributs se place
après le nom de la balise ouvrante et plus souvent c’est toujours une
valeur.
Syntaxe
Exemple :
II.5. Structure de base d’une page html 5
La structure générale d’une page html se présente de la manière

suivante :
9 avril 2019

Contact :0997721950/ 0820680397
14
Voici l’ endroit approprié pour saisir cette structure ; et cet endroit

est dans un éditeur de texte et dans le cas précis, nous utilisons notpad++ :
9 avril 2019
1. Le DOCTYPE html
La toute première ligne d’appelle le doctype. Elle est indispensable

car c’est qui indique qu’il d’agit d’une page web HTML.

Contact :0997721950/ 0820680397
15
2. Html
C’est la balise principale du code. Elle englobe tout le contenu

de votre page.
3. L’en-tête <Head> et le corps <body>

Une page web est constituée de deux parties :
 L’en-tête<Head> : cette section donne quelques informations
générales sur la page comme son titre ou encore l’encodage. Cette
section est généralement assez courte.
 Le corps <body> : c’est la que se trouve la partie principale de la
page, tout ce que nous écrivons qui sera affiché à l’écran. C’est à
l’intérieur du corps qui nous écrivons la majeur partie de notre code.
4. L’encodage (charset)
Cette balise indique l’encodage utilisé dans votre fichier.html.
5. Les commentaires
Pour insérer un commentaire dans les balises html, on utilise la
syntaxe suivante :
9 avril 2019

Contact :0997721950/ 0820680397
Exemple général
16
II.6. Organiser son texte
Nous allons découvrir de nombreuses balises html :
II.6.1. les paragraphes
Dans la plupart de cas, lorsqu’on écrit du texte dans une page web, on le
fait à l’intérieur des paragraphes avec la balises <p>.
Syntaxe
<p> bonjour à tous les étudiants de G2 informatique/ISS </p>.
<p> : signifie que c’est le début du paragraphe.

</p> : signifie que c’est la fin du paragraphe.
Ex :
9 avril 2019

Contact :0997721950/ 0820680397
17
Résultat du code
N.B : il existe une balise orphelline qui sert à indiquer qu’on doit aller à la
ligne : <br/>.
II.6.2. Les titres

9 avril 2019
Lorsque le contenu de votre page va s’étoffer avec des nombreux

paragraphes, il va devenir difficile pour vos visiteurs de se retrouver. En

Contact :0997721950/ 0820680397
html ,il existe une balise permettant d’insérer les titres : <h>. il existe six
18
niveaux des titres.
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <p>

Syntaxe
II.6.3. La mise en valeur

1. Mettre un peu en valeur
Pour mettre un peu en valeur un paragraphe, vous devez utiliser la

balise : <em>. Cette balise permet de mettre le texte en italique.
II.6.4. Les listes

9 avril 2019
Les listes nous aident souvent de mieux structurer notre texte et

d’ordonner nos informations. Il existe trois types de listes en HTML :

Contact :0997721950/ 0820680397
1. Les listes non ordonnées

19
Une liste non ordonnée ressemble à ceci :
• Fraises
• Framboises
• Cerises
C’est un système qui nous permet de créer une liste d’éléments

sans notion d’ordre (il n y a pas de premier ni de dernier). Créer une liste
non ordonnée est très simple, il suffit d’utiliser la balise <UL> que l’on
referme un peu plus loin avec </UL>.
Syntaxe
Et maintenant, on va écrire chacun des éléments de la liste entre

deux balises <LI></LI>.
Exemple :
2. Les listes ordonnées
Une liste ordonnée fonctionne de la même manière qu’une liste non

ordonnée seule une balise change : <ul> devient<ol>.
Exemple :
9 avril 2019

Contact :0997721950/ 0820680397
20
3. Les listes de définition
L’environnement <DL> délimite une zone de liste de définition. La

commande <DT> introduit un nouveau terme de définition. C’est en
général un élément court. La commande « dd» introduit une description du
terme de définition. Le résultat à l’écran est un décalage du texte vers la
droite.
II.6.5. Créer des liens
Un site web est constitué de plusieurs pages, comment faire pour aller
d’une page à une autre. À l’aide de liens. Un lien est un texte ou un
objet sur lequel on peut cliquer pour se rendre sur une autre page ou un
autre endroit de la même page.
1. Deux pages situées dans un même dossier

9 avril 2019
Pour créer un lien de deux pages dans un même dossier, il suffit de

créer les deux fichiers, puis respecter la syntaxe suivante :

Contact :0997721950/ 0820680397
21
2. Deux pages situées dans les dossiers différents
Supposons que la page2 trouve dans le dossier contenu, dans ce

cas, le lien doit être rédigé de la manière suivante :
Ou encore
9 avril 2019

Contact :0997721950/ 0820680397
22
3. Un lien vers une ancre
Une ancre est une sorte de point de repère que vous pouvez
mettre dans vos pages HTML lorsque qu’elles sont très longues. En
effet, il peut alors être utile de faire un lien amenant plus bas dans la
même page que le visiteur puisse sauter directement à la partie qui
l’intéresse.
9 avril 2019

Contact :0997721950/ 0820680397
Exemple :
23
4. Un lien pour envoyer un e-mail
Si vous voulez que vos visiteurs puissent vous envoyer un e-mail,

vous pouvez utiliser des liens de types mailto.
Ex :
Il suffit donc de commencer le lien par mailto et d’écrire d’adresse

e-mail ou on peut constater.
5. Un lien pour télécharger un fichier
En effet, il faut procéder exactement comme si vous faisiez un lien

vers une page web, mais en indiquant cette fois le nom du fichiers à
télécharger.
9 avril 2019
II.6.5. Les images
Avant de passer aux balises, il faut savoir ce qui suit.

Contact :0997721950/ 0820680397
Les deux formats d'image (maximum 256 couleurs) reconnus sur le Web,
24
sont le format GIF (version 89a) et le format JPEG. Pour le format GIF, on
retiendra la caractéristique "entrelacé" qui permet de charger
progressivement l'image lors de l'ouverture de la page. Ces deux formats
donnent des résultats assez équivalents bien que JPG soit plutôt
recommandé pour des images avec des tons nuancés ou dégradés.
L'ennemi sur le Web, c'est la taille des images! Plus l'image sera grande,
plus le temps de chargement sera long... au risque de décourager vos
visiteurs. Si cela est possible, une image en 16couleurs peut très bien faire
l'affaire. Présenter une petite image indiquant un lien vers l'image
complète est également un bon conseil.
Il n'est pas inutile de prévoir dans votre panoplie de compositeur Web, un
logiciel de retouche d'images. A ce propos "Paint Shop Pro" a la triple
qualité d'être disponible en shareware, d'être très intuitif et d'être
performant. En outre, un tel logiciel vous permettra de composer vos
propres images et ainsi de personnaliser vos pages.
Dois-je rappeler qu'il est très facile de se faire une bibliothèque d'images
tout en surfant sur le Web? Avec Netscape, il suffit de se positionner sur
l'image, de cliquer avec le bouton droit de la souris et de suivre les
instructions du menu déroulant (Save Image As...).
 Le code Html est :
<IMG SRC="Adresse de l'image"> Afficher l'image qui se trouve à l'adresse...
9 avril 2019

Contact :0997721950/ 0820680397
II.6.6. TABLEAUX <TABLE> ... </TABLE>

25
Les commandes sont les suivantes:
<TABLE> ... </TABLE>pour créer un tableau. Pour cette commande les options
suivantes sont possibles :
BORDER: trace un cadre en trait fin
BORDER=n: trace un cadre en trait de n pixels d'épaisseur
CELLSPACING=n: espacement de n pixels entre les cellules.
CELLPADDING=n: espacement autour de l'écriture dans les cellules.
WIDTH=n ou n%: largeur en pixels ou largeur relative du tableau.
Remarque
cellspacing et cellpadding ont priorité sur width.
<CAPTION> nomtableau</CAPTION>pour indiquer le nom du tableau.
Pour cette commande l'option suivante est possible:
ALIGN=top/bottom: place le nom du tableau au-dessus/au-dessous du

tableau.
<TR> ... </TR>encadre une ligne du tableau.
Pour cette commande les options suivantes sont possibles:
ALIGN=left/right/center: position horizontale (gauche/droite/centre) du texte

dans les cellules de la ligne. VALIGN=top/middle/bottom/baseline: position
verticale (haut/milieu/bas/bas) du texte dans les cellules de la ligne.
<TH> ... </TH>encadre une cellule d'en-tête du tableau. (cellule pouvant

contenir un texte alphanumérique, une image, une liste, un lien, un autre
9 avril 2019
tableau ou rien)(texte en gras).
Pour cette commande les options suivantes sont possibles :

Contact :0997721950/ 0820680397

26
dans la cellule d'entête.
COLSPAN=n: fusionne n cellules horizontalement.
ROWSPAN=n: fusionne n cellules verticalement.
NOWRAP: supprime la césure éventuelle du texte de la cellule d'en-tête.
<TD> ... </TD>encadre une cellule du tableau. (cellule pouvant contenir un

texte alphanumérique, une image, une liste, un lien, un autre tableau ou rien)
Pour cette commande les options suivantes sont possibles:

dans la cellule.
COLSPAN=n: fusionne n cellules horizontalement.
ROWSPAN=n: fusionne n cellules verticalement.
NOWRAP: supprime la césure éventuelle du texte de la cellule.
Exemple1 :
<HTML>
<HEAD>
<TITLE>tableau 1</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE BORDER>
<CAPTION ALIGN=top> PREMIER TABLEAU</CAPTION>
<TR>
<TD>ligne 1 ; cellule 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</CENTER>
9 avril 2019
<BODY>
<HTML>

Contact :0997721950/ 0820680397
Exemple 2:
27
<HTML>
<HEAD><TITLE>tableau 2</TITLE></HEAD>
<Body>
<TABLE BORDER=8 CELLPADDING=10>
<CAPTION ALIGN=bottom>DEUXIEME TABLEAU
</CAPTION>
<TR>
<TH COLSPAN=5>LETTRES</TH>
</TR>
<TR>
<TD>Aa</TD><TD>Bb</TD><TD>Cc</TD><TD>Dd<
/TD><TD>Ee</TD>
</TR>
<TR>
<TD>Ff</TD><TD>Gg</TD><TD>Hh</TD><TD>Ii</TD
><TD>Jj</TD>
</TR>
</TABLE>
</BODY>
</HTML>
II.6.7.Formulaires
1. La commande FORM
Des formulaires peuvent être préparés afin de saisir des données et les traiter
au niveau du serveur. Pour rédiger un questionnaire, il faut:
 Établir une zone d'édition (appelée FORM) en utilisant les commandes

<FORM></FORM>.
 Définir la méthode à employer pour transmettre au serveur l'information
recueillie dans les champs du formulaire.
 Identifier l'emplacement et le nom du programme qui devra traiter
l'information recueillie.
 Fournir, s'il y a lieu, les arguments au programme de traitement des
données. Toute cette information se retrouve dans la commande
suivante:
9 avril 2019
<FORM METHOD="POST" ACTION="/cgi-bin/questionnaire.cmd?xxx">

Contact :0997721950/ 0820680397
La méthode utilisée est POST, le programme de traitement se nomme

28
questionnaire.cmd et se retrouve dans le dossier cgi-bin, un seul argument est
fourni au programme soit xxx.
Il est à noter que le programme de traitement des données

(questionnaire.cmd en l'occurrence) doit être fourni par l'administrateur du
serveur et créé en fonction de l'application à supporter.
2. Les commandes INPUT
Syntaxe: INPUT="TEXT"
Parmi les choix disponibles en HTML, un des types d'entrée de données

est le champ input type="text". Dans ce cas, il faut inscrire le type de champ,
le nom du champ et ses dimensions à l'écran.
Ainsi, dans la question ci-dessous, le code à utiliser pour entrer le nom de la

personne est :
NOM: <input type="text" name="name" size=30>.
Le type text est un champ ou l'usager entre de l'information sur son

clavier, dans une zone définie à l'écran par la commande size.
Ainsi, une commande size=30 est un champ d'une longueur de 30

espacements de largeur. Pour un champ plus long, entrez une valeur de 50
ou 70, selon l'espace requis pour couvrir toutes les possibilités.
La commande name="name"précise que l'on désire enregistrer le

contenu du champ dans la rubrique "name".
Exemple:
<HTML>
<FORM METHOD="POST" ACTION="/cgibin/questionnaire.cmd?xxx">
9 avril 2019
<p>
<h4><CENTER>Essai Formulaire </CENTER></H4>
<pre><b>
<LI>NOM: <input type="text" name="name" size=30>
<LI>ADRESSE: <input type="text" name="street.address" size=30>

Contact :0997721950/ 0820680397
<LI>VILLE<input type="text" name="city" size=30>

<LI>PROVINCE: <input type="text" size=15 name="state"> 29
<LI>CODE POSTAL: <input type="text" name="zip" size=10>
<LI>PAYS:<input type="text" name="country" size=20>
<LI>TELEPHONE: <input type="text" name="phone" size=10>
<LI>COURRIER ELECTRONIQUE: <input type="text" name="email" size=30>
</b></pre>
<input type="submit" value="Soumettre"> <input type="reset" value="Effacer et
recommencer"><P>
</form><p>
</BODY>
</HTML>
3. La commande INPUT="RADIO"
Un autre type de champ est le type "input type=radio"qui permet
d'afficher une série de boutons radio comme choix de réponses. Il suffit
d'abord de poser la question puis de positionner la commande suivante:
<input type="radio" name="info" value="OUI">OUI
<input type="radio" name="info" value="NON">NON
Dans l'exemple ci-dessous, deux choix sont offerts Oui ou Non. Lorsque
l'usager répond, il n'a d'autre choix que l'une ou l'autre réponse. Il ne peut pas
choisir les deux. <P> <br>
<DL>
<DT>A. <input type="radio" name="refer" value="par_hasard."> Tout à

fait par hasard.
<DT>B. <input type="radio" name="refer" value="Par un ancien."> </DL>
Idem que l’exemple précédent
…
9 avril 2019
<br>
<DL><DT>A. <input type="radio" name="refer" value="par_hasard.">
Tout à fait par hasard.
<DT>B. <input type="radio" name="refer" value="Par un ancien."> </DL>

Contact :0997721950/ 0820680397
<input type="submit" value="Soumettre"> <input type="reset" value="Effacer et

recommencer"><P> 30
</form><p>
</BODY>
</HTML>
Remarque:
Dans l'exemple précédent il faut noter que le nombre de choix de
réponses n'est pas limité à deux.
3. La commande INPUT=CHECKBOX
La commande input Type=checkboxpermet d'afficher une liste ou

plusieurs choix sont possibles en même temps. La commande s'écrit:
Texte<input name="nom_du_champ" TYPE=checkbox VALUE="texte"><BR>
ou
<input name="nom_du_champ" TYPE=checkbox VALUE="texte">Texte<BR>
4. La commande SELECT NAME et OPTION
La commande select nameet Optionpermet d'afficher une liste ou un seul

choix est possible et qui s'affichent sous la forme d'un menu "pop-up". La
commande s'écrit:
<select name><option selected>option1<option>option2<option>

option3</select>
Exemple :
Formation d’origine:
<BR>
<select name><option selected>DUT<option>BTS<option>DEUG</select>
5. La commande TEXTAREA.
La commande HTML utilisée est:

9 avril 2019
<TEXTAREA name="nom_du_champ?" rows=n cols=m></TEXTAREA>

Contact :0997721950/ 0820680397
Dans ce type, on spécifie d'abord le type soit textarea, ensuite le nom

31
de la rubrique soit name=" nom_du_champ" puis les paramètres d'affichage
de la zone de dialogue en rangées (n) et en colonnes (m).
<TEXTAREA name="zone_libre" rows=5 cols=40></TEXTAREA>
Les formulaires doivent être complétés avant fermeture par une

commande permettant d'envoyer le contenu des champs remplis au serveur
HTTP.
Cette commande s'écrit:
<input type="submit" value="Soumettre">
On ajoute également une deuxième commande qui permet à l'usager

de reprendre le questionnaire s'il s'est trompé.
La commande en question s'écrit:
<input type="reset" value="effacer et recommencer">
II.6.7. Les FRAMES
Cette fonctionnalité est apparue avec NETSCAPE 2.0 ce qui a permit

de créer des manières, des notes de bas page, des fenêtres latérales etc. Ce
partage de la fenêtre en "cadres" ou "cellules" autonomes, revient à diviser la
fenêtre en plusieurs zones appelées frames. Chaque zone est gérée
indépendamment des autres par un document HTML différent. Chaque zone
porte un nom.
Attention le corps du fichier n'est plus inclus dans <BODY>…</BODY>mais

dans:
<FRAMESET>…</FRAMESET>. Ces deux marqueurs s’excluent mutuellement.
 Trois commandes permettent de gérer cette fonctionnalité.

9 avril 2019
<FRAMESET ROWS COLS> </FRAMESET> permet de diviser une zone en

cellules horizontales ou verticales.
ROWS="n,n%,*,..." divise la zone en cellules horizontales.

Contact :0997721950/ 0820680397
n= hauteur en nombre de pixels,

32
n%= hauteur de la cellule en pourcentage de l'écran,
*= hauteur restante.
COLS="n,n%,*,..." divise la zone en cellules verticales.
n= largeur en nombre de pixels
n%= largeur de la cellule en pourcentage de l'écran
• = largeur restante
Des combinaisons entre COLS et ROWS peuvent être réalisées pour

diviser l’écran en farme horizontale et verticale.
9 avril 2019

Contact :0997721950/ 0820680397
33
<FRAME NAME SRC SCROLLING MARGINWIDTH MARGINHEIGHT NORESIZE>
caractérise la cellule
NAME="nom_de_la_zone" SRC="URL" SCROLLING="yes" ou "no"
MARGINWIDTH= nombre de pixels de la marge verticale
MARGINHEIGHT= nombre de pixels de la marge horizontale
NORESIZE évite la modification de la taille par l'utilisateur.
<NOFRAME> </NOFRAME>
à partir de cette commande, le texte ne sera affiché que par les Browsers ne
sachant pas gérer les frames.
9 avril 2019

Contact :0997721950/ 0820680397
34
Pour utiliser les "frames", un nouvel attribut "TARGET" de la commande

<A> permet de donner le nom de la cellule ( cf attribut "NAME" de la
commande <FRAME>) dans laquelle le document sera affiché.
<A HREF="url" TARGET= >lien</A>
o TARGET="Cellule-1" affichage dans la cellule "Cellule-1"

o TARGET="_self" affichage dans la même cellule
o TARGET="_blank" affichage dans une nouvelle fenêtre
o TARGET="_top" suppression de toutes les frames, retour à un affichage
classique.
9 avril 2019

Contact :0997721950/ 0820680397
Chap III LE LANGAGE CSS

35
III.1. INSERER DU CODE CSS
La première question que vous devez vous poser est : où doit-on placer
le code CSS ? Dans le fichier .html, entre des balises spéciales ou dans un
autre fichier ?
La réponse est : vous avez le choix ! En effet, il y a 3 façons différentes

d’insérer du code CSS. Certaines sont plus ou moins adaptées selon le cas.
Nous allons étudier chaque méthode.
 Dans le fichier.css (méthode la plus recommandé).

 Dans l’en-tête <head> du fichier HTML.
 Directement dans les balises du fichier HTML.
I. DANS UN FICHIER CSS
La technique la plus courante (et la plus conseillée !) consiste à créer un

fichier spécial pour placer le code CSS. Jusqu’ici, vous avez dû créer des
fichiers à l’extension .html, par exemple test.html. Cette fois, créez un
nouveau fichier que vous enregistrerez avec l’extension .css, par exemple
style.css.
Commençons par enregistrer le fichier CSS avec Notepad++ ou sublime:
1. Ouvrez Notepad++ et allez dans le menu Langage/CSS pour activer la

coloration du code CSS.
2. Tapez ensuite le code CSS que vous voulez.
Pour le moment, vu que nous ne connaissons pas encore le CSS,

contentons nous de prendre cet exemple (dont nous détaillerons le
fonctionnement plus tard) :
p
9 avril 2019
{
text-align: center;
}

Contact :0997721950/ 0820680397
Enregistrez ensuite le fichier en vous rendant dans le menu

36
Fichier/Enregistrer. Tapez le nom que vous voulez donner à votre fichier,
comme style.css, et cliquez sur Enregistrer.
Vous pouvez enregistrer le fichier dans le même dossier que les .html, ou
dans un sous-dossier css. Il n’y a pas de règle particulière sur ce point.
Maintenant que cela est fait, il va falloir modifier le fichier XHTML (test.html
dans mes exemples) pour lui dire d’utiliser le fichier style.css.
On doit rajouter une balise entre<head>et </head>: la balise <link />.
Voici un exemple d’utilisation :
Vous pouvez modifier si vous le désirez les attributs title (facultatif, c’est le
nom de votre design) et href (nom du fichier .css).
Il est facile de vérifier si cela fonctionne : normalement vos paragraphes

de texte devraient maintenant tous être centrés !
II. DANS L’EN-TETE DU FICHIER HTML

9 avril 2019
Une autre technique consiste à placer le code CSS à l’intérieur même

du fichier XHTML. Il devra être placé entre des balises spéciales situées entre

Contact :0997721950/ 0820680397
<head>et </head>. Cette fois, pas besoin de créer de nouveau fichier à

37
l’extension .css: tout se passera dans votre fichier .html.
La balise permettant d’insérer du CSS dans un fichier XHTML est <style>.

Elle s’utilise comme ceci :
III. DIRECTEMENT DANS LES BALISES(NON RECOMMANDE)
Dernière méthode à manipuler avec précaution, vous pouvez

ajouter un attribut style à n’importe quelle balise. Vous insérer
votre code CSS directement :
9 avril 2019

Contact :0997721950/ 0820680397
III.2. APPLIQUER UN STYLE A UNE OU PLUSIEUR

38
III.2.1. APPLIQUER UN STYLE A TOUTES LES BALISES
On peut appliquer un style à toutes les balises, que ce soit des

paragraphes <p>, des titres <h1>,des citations <q>, etc. Dans ce but, on utilise
le sélecteur universel. Derrière ce nom terrifiant se cache... le symbole étoile *!
Il signifie : « appliquer à toutes les balises ».
Insérez donc une étoile suivie d’une accolade ouvrante et d’une

accolade fermante, comme ceci :
*
{
}
Les accolades délimitent le style. Tout le code CSS qui se trouve à l’intérieur
sera appliqué à toutes les balises. Si on veut centrer le texte de toute la page
web (titres, paragraphes...), on écrira le code suivant :
*
{
text-align: center;
}
Dans cet exemple, text-align est ce qu’on appelle une propriété CSS,
et center est une valeur. Il est possible de définir plusieurs propriétés CSS à la
fois : dans ce cas elles se combineront. On peut ainsi faire en sorte que le
texte soit centré et écrit en bleu, italique et souligné à la fois.
En résumé : il faut séparer la propriété de sa valeur par le symbole

deuxpoints (:) et terminer par un point-virgule (;) après la valeur.
Schématiquement, notre code CSS devrait donc toujours ressembler à ceci :
*
{
9 avril 2019
propriete: valeur;
propriete: valeur;
propriete: valeur;
}
Contact :0997721950/ 0820680397
III.2.2. APPLIQUER UN STYLE A UNE BALISE

39
Nous savons maintenant changer l’apparence de toute la page web
grâce au sélecteur universel *. Toutefois, vous n’avez peut-être pas envie
d’appliquer un même style partout dans la page. Par exemple, vous voudriez
bien centrer les titres de vos pages web, mais pas les paragraphes de texte !
Ex :
h1
{
text-align: center;
}
III.2.3. APPLIQUER UN STYLE A PLUSIEURS BALISES
Il est aussi possible d’appliquer un même style à plusieurs balises à la

fois. Pour faire cela, il suffit de séparer les noms des balises par des virgules.
Par exemple, si nous voulons centrer nos titres <h1>et <h2>:
h1,h2
{
text-align: center;
}
III.2.4. APPLIQUER UN STYLE A CERTAINES BALISES
1. UN IDENTIFIANT UNIQUE
Nous savons comment changer l’apparence de toutes les balises d’un
même type (par exemple tous les paragraphes). Comment faire pour
changer l’apparence d’un seul paragraphe en particulier ?
En fait, il s’agit d’identifier un paragraphe précis en CSS. Et pour cela, il
faut donner un nom à la balise qui nous intéresse.
<p>Nous sommes les meilleurs étudiants de l’iss dans la médiocrité.</p>
<p id="introduction"> Nous sommes les meilleurs étudiants de l’iss dans la
médiocrité.</p>
Notre paragraphe est maintenant identifié: il a pour nom « introduction ».
Rendons-nous maintenant dans notre fichier CSS pour y mettre le code
9 avril 2019
suivant :
#introduction
{
text-align: center;
}

Contact :0997721950/ 0820680397
Le symbole dièse (#) permet d’indiquer que l’on parle d’une balise ayant
40
un nom précis.
2. UN IDENTIFICATEUR REUTILISABLE
Le défaut de l’identificateur id, c’est qu’on ne peut l’utiliser qu’une
seule fois. Il donne un nom unique. Heureusement, il existe un autre attribut, lui
aussi utilisable sur la plupart des balises. Il s’agit de class. Son fonctionnement
est pratiquement le même que celui d’id, à la différence près qu’on peut
donner le même nom à autant de balises que l’on veut.
Dans cet exemple, nous donnons un même nom au titre <h1>et au
premier paragraphe.
<h1 class="maclasse">Bienvenue sur mon site web !</h1>
Cette fois, nous devons modifier le CSS et utiliser un point à la place du dièse :
.maclasse
{
text-align: center;
}
III.3. METTRE EN FORME SON TEXTE
III.3.1. L’ALIGNEMENT
Nous avons découvert dans le chapitre précédant comment centrer
un titre, avec le code suivant :
h1
{
text-align: center;
}
Commençons par étudier plus en détail la propriété d’alignement text
align. On n’a fait que l’apercevoir jusqu’ici : nous n’avons vu que la valeur
permettant de centrer ! Il faut savoir qu’il existe en tout 4 valeurs différentes :
• left: à gauche ;
• center: centré ;
• right: à droite ;
9 avril 2019
• justify: justifié
Ces possibilités d’alignement sont les mêmes que celles que vous offre
n’importe quel éditeur de texte. Prenons par exemple la valeur justify qui

Contact :0997721950/ 0820680397
permet d’obliger le texte à prendre la même largeur sur chaque ligne. Cet
41
alignement est très utilisé dans le monde de l’imprimé.
Ex :
p
{
text-align: justify;
}
III.3.2. LES POLICES
La propriété CSS précisant la police est font-family. Si vous voulez que vos
paragraphes de texte s’affichent en Verdana, vous taperez le code suivant :
Notez que vous pouvez combiner cette propriété avec celle d’alignement
que nous venons d’apprendre. C’est même là tout l’intérêt du CSS !
D’après le code suivant, mes paragraphes seront donc écrits en Verdana et
seront justifiés :
p
{
font-family: Verdana;
}
Vous pouvez bien entendu demanderà utiliser d’autres polices que
celles-ci, mais vous ne pouvez pas être sûr que vos visiteurs l’auront sur leur
ordinateur. Comment faire pour gérer le cas où le visiteur ne possède pas la
police que vous voulez ? Eh bien le CSS a tout prévu, comme nous allons le
voir...
En règle générale, on n’indique jamais un seul nom de police. On en
propose plusieurs, que l’on sépare par des virgules : Les noms de polices
doivent être écrits par ordre de priorité. Cela signifie dans l’exemple ci-dessus
que la police Elephant sera utilisée en priorité si elle est présente sur
l’ordinateur du visiteur. Si elle n’est pas présente, alors le navigateur
recherchera la seconde police (Arial Black) et ainsi de suite. La dernière
9 avril 2019
police indiquée sera utilisée si aucune des précédentes n’était disponible.

p
{

Contact :0997721950/ 0820680397
}
p 42
{
}
p
{
font-family: Elephant, "Arial Black", Georgia, Verdana;
}
Vous vous demandez sûrement... « Mais comment fait-on si le visiteur
n’a même pas Verdana ? ». La réponse est simple : on doit indiquer un nom
de police par défaut.
Il existe deux noms de polices par défaut :
• serif: police par défaut avec empattement.
• sans-serif: police par défaut sans empattement.
III.3.3. LA TAILLE DU TEXTE
La propriété CSS gérant la taille du texte est font-size. Il existe, vous allez
le voir, un nombre important de manières de s’en servir. On peut en effet
préciser la taille du texte de différentes façons.
1. EN PIXELS
Vous pouvez définir la hauteur des lettres en pixels. C’est la technique la plus
précise : elle indique au pixel près la taille que doivent prendre les lettres
affichées à l’écran du visiteur.
Par exemple, si vous souhaitez obtenir une taille de 18 pixels, vous
écrirez :
p
{
font-size: 18px;
}
2. EN DONNANT UN NOM A LA TAILLE
9 avril 2019
Oui oui, vous avez bien lu : on peut écrire directement « gros », « très
gros » ou encore « gigantesque » en toutes lettres pour définir la taille. Bien
entendu, il va falloir exprimer cela en anglais !
Si on souhaite écrire un texte en grand, on utilisera le code suivant :

Contact :0997721950/ 0820680397
p
{ 43
font-size: large;
}
L’avantage est que cette notation est relative. Si le navigateur du
visiteur est configuré pour afficher de gros caractères, alors le mot grand
signifiera peut-être 30 pixels de hauteur au lieu de 20 pixels en temps normal.
3. EN NOTATION RELATIVE « EM »
La notation relative que nous venons de voir ne nous permet d’utiliser
que sept tailles différentes. Si on recherche une taille intermédiaire, ou L’unité
« em » constitue en ce sens un bon choix.
Dans cette notation, 1em signifie « Taille normale », 1.5 em signifie que
la taille sera 1,5 fois plus grande que la normale, et 0.5 em qu’elle sera à la
moitié de la taille normale.
Supposons que nous souhaitons grossir légèrement la taille de nos
paragraphes. Avec le code suivant, mes paragraphes seront écrits 1,3 fois
plus gros que la normale :
p
{
font-size: 1.3em;
}
C’est cette notation que j’utilise personnellement le plus souvent car
elle permet d’être précis tout en s’adaptant à la taille de police par défaut
du visiteur.
4. En pourcentage
Enfin, il est aussi possible d’exprimer la taille en pourcentage. C’est une
notation connue, donc facile à utiliser pour la plupart des webmasters
débutants.
Sur cet exemple, la taille de mes lettres sera égale à 120 % de la taille
par défaut :
p
9 avril 2019
{
font-size: 120%;
}
Cette unité est là encore très proche de « em » et « ex ». Elle est plus facile à
appréhender par les débutants car tout le monde connaît les pourcentages.
Contact :0997721950/ 0820680397
44
9 avril 2019

Contact :0997721950/ 0820680397
Chap IV INITIATION AU JAVASCRIPT

45
IV.1. LE JAVASCRIPT MINIMUM
a. La balise <SCRIPT>
Vous savez déjà que votre script vient s'ajouter à votre page Web. Le
langage Html utilise des tags ou balises pour "dire" au browser d'afficher une
portion de texte en gras, en italique, etc.
Dans la logique du langage Html, il faut donc signaler au browser par

une balise, que ce qui suit est un script et que c'est du Javascript (et non du
VBScript). C'est la balise <SCRIPT LANGUAGE="Javascript">. De même, il
faudra informer le browser de la fin du script. C'est la balise </SCRIPT>.
b. Les commentaires
Il vous sera peut-être utile d'inclure des commentaires personnels dans

vos codes Javascript. C'est même vivement recommandé comme pour tous
les langages de programmation (mais qui le fait vraiment ?). Javascript utilise
les conventions utilisées en C et C++.
c. Où inclure le code en Javascript ?
Le principe est simple. Il suffit de respecter les deux principes suivants :
 n'importe où.
 mais là où il le faut.
Le browser traite votre page Html de haut en bas (y compris vos ajoutes
en Javascript). Par conséquent, toute instruction ne pourra être exécutée
que si le browser possède à ce moment précis tous les éléments nécessaires à
son exécution. Ceux-ci doivent donc être déclarés avant ou au plus tard lors
de l'instruction.
Pour s'assurer que le programme script est chargé dans la page et prêt à
fonctionner à toute intervention de votre visiteur (il y a des impatients) on
9 avril 2019
prendra l'habitude de déclarer systématiquement (lorsque cela sera possible)

un maximum d'éléments dans les balises d'en-tête soit entre <HEAD> et
</HEAD> et avant la balise <BODY>. Ce sera le cas par exemple pour les

Contact :0997721950/ 0820680397
fonctions. Rien n'interdit de mettre plusieurs scripts dans une même page
46
Html.
Il faut noter que l'usage de la balise script n'est pas toujours obligatoire.
Ce sera le cas des événements Javascript (par exemple onClick) où il faut
simplement insérer le code à l'intérieur de la commande Html comme un
attribut de celle-ci. L'événement fera appel à la fonction Javascript lorsque la
commande Html sera activée. Javascript fonctionne alors en quelque sorte
comme une extension du langage Html.
d. Une première instruction Javascript
Sans vraiment entrer dans les détails, voyons une première instruction
Javascript (en fait une méthode de l'objet window) soit l'instruction alert().
alert("votre texte");
Cette instruction affiche un message (dans le cas présent votre texte

entre les guillemets) dans une boite de dialogue pourvue d'un bouton OK.
Pour continuer dans la page, le lecteur devra cliquer ce bouton.
Vous remarquerez des points-virgules à la fin de chaque instruction

Javascript (ce qui n'est pas sans rappeler le C et le C++). Le Javascript, bon
enfant, est moins strict que ces autres langages et ne signale généralement
pas de message d'erreur s'ils venaient à manquer. On peut considérer que le
point-virgule est optionnel et qu'il n'est obligatoire que lorsque vous écrivez
plusieurs instructions sur une même ligne. On recommande quand même
vivement dans la littérature d'en mettre de façon systématique.
Javascript est "bon enfant" car il n'est pas toujours trop strict sur la syntaxe et
passe au-dessus de certaines libertés prises avec celle-ci. Très bien! Mais ce
caractère "bon enfant" est à double tranchant car parfois, pour une raison
indéterminée, il devient dans certaines situations plus rigoureux et alors bonne
9 avril 2019
chance pour débugger votre script.

Contact :0997721950/ 0820680397
e. Votre première page Html avec du Javascript

47
<HTML>
<HEAD>
<TITLE>Mon premier Javascript</TITLE>
</HEAD>
<BODY>
VOS OBJETS A AFFICHER
<SCRIPT LANGUAGE="Javascript">

</SCRIPT>
LA SUITE DU HTML
</BODY>
</HTML>
Remarques
Javascript est case sensitive. Ainsi il faudra écrire alert() et non Alert().
Pour l'écriture des instructions Javascript, on utilisera l'alphabet ASCII classique
(à 128 caractères) comme en Html. Les caractères accentués comme é ou à
ne peuvent être employés que dans les chaînes de caractères c.-à-d. dans
votre texte de notre exemple.
Les guillemets " et l'apostrophe ' font partie intégrante du langage

Javascript. On peut utiliser l'une ou l'autre forme à condition de ne pas les
mélanger. Ainsi alert("...') donnera un message d'erreur. Si vous souhaiter
utiliser des guillemets dans vos chaînes de caractères, tapez \" ou \' pour les
différencier vis à vis du compilateur.
IV.2. AFFICHAGE DU TEXTE
a. Méthode de l'objet document
Rappelez-vous... Nous avions montré que ce qui apparaît sur votre écran,
peut être "découpé" en objets et que Javascript allait vous donner la
possibilité d'accéder à ces objets (Un peu de théorie objet). La page Html qui
s'affiche dans la fenêtre du browser est un objet de type document.
9 avril 2019
A chaque objet Javascript, le concepteur du langage a prévu un ensemble

de méthodes (ou fonctions dédiées à cet objet) qui lui sont propres. A la

Contact :0997721950/ 0820680397
méthode document, Javascript a dédié la méthode "écrire dans le

48
document", c'est la méthode write().
L'appel de la méthode se fait selon la notation :
nom_de_l'objet.nom_de_la_méthode
Pour appeler la méthode write() du document, on notera document.write();
b. La méthode write()
La syntaxe est assez simple soit write("votre texte");
On peut aussi écrire une variable, soit la variable résultat, write(resultat);
Pour associer du texte (chaînes de caractères) et des variables, on utilise

l'instruction write("Le résultat est " + resultat);
On peut utiliser les balises Html pour agrémenter ce texte
write("<B>Le résultat est</B>" + resultat); ou write ("<B>" + "Le résultat est " +
"</B>" + resultat)
c. Exemple (classique !)
On va écrire du texte en Html et en Javascript.
<HTML>
<BODY>
<H1>Ceci est du Html</H1>

</SCRIPT>
</BODY>
</HTML>
9 avril 2019

Contact :0997721950/ 0820680397
IV.3. UTILISATION DES VARIABLES

49
a. Les variables en Javascript
Les variables contiennent des données qui peuvent être modifiées lors de
l'exécution d'un programme. On y fait référence par le nom de cette
variable.
Un nom de variable doit commencer par une lettre (alphabet ASCII) ou le
signe_ et se composer de lettres, de chiffres et des caractères _ et $ (à
l'exclusion du blanc). Le nombre de caractères n'est pas précisé. Pour rappel
Javascript est sensible à la case. Attention donc aux majuscules et
minuscules!
b. La déclaration de variable
Les variables peuvent se déclarer de deux façons :
 soit de façon explicite. On dit à Javascript que ceci est une variable.
La commande qui permet de déclarer une variable est le mot var. Par
exemple :
var Numero = 1
var Prenom = "placide"
 soit de façon implicite. On écrit directement le nom de la variable suivi
de la valeur que l'on lui attribue et Javascript s'en accommode. Par
exemple :
Numero = 1
Prenom = "placide"
IV.4. LES FONCTIONS
a. Définition
Une fonction est un groupe de ligne(s) de code de programmation
destiné à exécuter une tâche bien spécifique et que l'on pourra, si besoin est,
utiliser à plusieurs reprises. De plus, l'usage des fonctions améliorera
grandement la lisibilité de votre script.
9 avril 2019
En Javascript, il existe deux types de fonctions :

 les fonctions propres à Javascript. On les appelle des "méthodes". Elles
sont associées à un objet bien particulier comme c'était le cas de la
méthode Alert() avec l'objet window.
Contact :0997721950/ 0820680397
 les fonctions écrites par vous-même pour les besoins de votre script.
50
C'est à celles-là que nous nous intéressons maintenant.
b. Déclaration des fonctions
Pour déclarer ou définir une fonction, on utilise le mot (réservé) function. La
syntaxe d'une déclaration de fonction est la suivante :
function nom_de_la_fonction(arguments) {
... code des instructions ...
}
La mention des arguments est facultative mais dans ce cas les
parenthèses doivent rester. C'est d'ailleurs grâce à ces parenthèses que
l'interpréteur Javascript distingue les variables des fonctions. Nous reviendrons
plus en détail sur les arguments et autres paramètres dans la partie Javascript
avancé.
Lorsque une accolade est ouverte, elle doit impérativement, sous peine
de message d'erreur, être refermée. Prenez la bonne habitude de fermer
directement vos accolades et d'écrire votre code entre elles. Le fait de définir
une fonction n'entraîne pas l'exécution des commandes qui la composent.
Ce n'est que lors de l'appel de la fonction que le code de programme est
exécuté.
c. L'appel d'une fonction
L'appel d'une fonction se fait le plus simplement du monde par le nom
de la fonction (avec les parenthèses).
Soit par exemple nom_de_la_fonction();
Il faudra veuiller en toute logique (car l'interpréteur lit votre script de
haut vers le bas) que votre fonction soit bien définie avant d'être appelée.
d. Les fonctions dans <HEAD>...<HEAD>
Il est donc prudent ou judicieux de placer toutes les déclarations de
fonction dans l'en-tête de votre page c.-à-d dans la balise <HEAD> ...
9 avril 2019
<HEAD>. Vous serez ainsi assuré que vos fonctions seront déjà prises en
compte par l'interpréteur avant qu'elles soient appelées dans le <BODY>.

Contact :0997721950/ 0820680397
e. Exemple
51
Dans cet exemple, on définit dans les balises HEAD, une fonction appelée
message() qui affiche le texte "Bienvenue à ma page". cette fonction sera
appelée au chargement de la page voir onLoad=.... dans le tag. <BODY>.
<HTML>
<HEAD>
<--function message() {
document.write("Bienvenue à ma page");
}
//-->
</SCRIPT>
</HEAD>
<BODY onLoad="message()">
</BODY>
</HTML>
f. Passer une valeur à une fonction
On peut passer des valeurs ou paramètres aux fonctions Javascript. La
valeur ainsi passée sera utilisée par la fonction.
Pour passer un paramètre à une fonction, on fournit un nom d'une variable
dans la déclaration de la fonction. Un exemple un peu simplet pour
comprendre. J'écris une fonction qui affiche une boite d'alerte dont le texte
peut changer.
Dans la déclaration de la fonction, on écrit :
function Exemple(Texte) {
alert(texte);
}
Le nom de la variable est Texte et est définie comme un paramètre de la
fonction. Dans l'appel de la fonction, on lui fournit le texte :
Exemple("Salut à tous");
g. Passer plusieurs valeurs à une fonction
On peut passer plusieurs paramètres à une fonction. Comme c'est souvent
9 avril 2019
le cas en Javascript, on sépare les paramètres par des virgules.

function nom_de_la_fonction(arg1, arg2, arg3) {
... code des instructions ...
}
Contact :0997721950/ 0820680397
Notre premier exemple devient pour la déclaration de fonction : function

52
Exemple bis(Texte1, Texte2){...} et pour l'appel de la fonction
Exemple bis("Salut à tous", "Signé placide")
IV.5. LES CONDITIONS
a. Si Maman si ..." ou l'expression if
A un moment ou à un autre de la programmation, on aura besoin de
tester une condition. Ce qui permettra d'exécuter ou non une série
d'instructions. Dans sa formulation la plus simple, l'expression if se présente
comme suit
if (condition vraie) {
une ou plusieurs instructions;
}
Ainsi, si la condition est vérifiée, les instructions s'exécutent. Si elle ne l'est
pas, les instructions ne s'exécutent pas et le programme passe à la
commande suivant l'accolade de fermeture.
De façon un peu plus évoluée, il y a l'expression if...else
if (condition vraie) {
instructions1;
}
else {
instructions2;
}
Si la condition est vérifiée (true), le bloc d'instructions 1 s'exécute. Si elle
ne l'est pas (false), le bloc d'instructions 2 s'exécute.
Dans le cas où il n'y a qu'une instruction, les accolades sont
facultatives.
Grâce aux opérateurs logiques "et" et "ou", l'expression de test pourra
tester une association de conditions.
Ainsi if ((condition1) && (condition2)), testera si la condition 1 et la
condition 2 est réalisée. Et if ((condition1) || (condition2)), testera si une au
9 avril 2019
moins des conditions est vérifiée.

Pour être complet (et pour ceux qui aiment les écritures concises), il y a
aussi :

Contact :0997721950/ 0820680397
(expression) ? instruction a : instruction b Si l'expression entre parenthèse est

53
vraie, l'instruction a est exécutée. Si l'expression entre parenthèses retourne
faux, c'est l'instruction b qui est exécutée.
b. L'expression for
L'expression for permet d'exécuter un bloc d'instructions un certain nombre
de fois en fonction de la réalisation d'un certain critère. Sa syntaxe est :
for (valeur initiale ; condition ; progression) {
instructions;
}
Prenons un exemple concret
for (i=0, i<10, i++) {
document.write(i + "<BR>")
}
Au premier passage, la variable i, étant initialisée à 0, vaut bien
entendu 0. Elle est bien inférieure à 10. Elle est donc incrémentée d'une unité
par l'opérateur d'incrémentation i++ (i vaut alors 2) et les instructions
s'exécutent.
A la fin de l'exécution des instructions, on revient au compteur. La
variable i (qui vaut 2) est encore toujours inférieure à 10. Elle est augmentée
de 1 et les instructions sont à nouveau exécutées. Ainsi de suite jusqu'à ce
que i vaille 10. La variable i ne remplit plus la condition i<10. La boucle
s'interrompt et le programme continue après l'accolade de fermeture.
c. While
L'instruction while permet d'exécuter une instruction (ou un groupe
d'instructions) un certain nombre de fois. while (condition vraie){ continuer à
faire quelque chose }
Aussi longtemps que la condition est vérifiée, Javascript continue à
exécuter les instructions entre les accolades. Une fois que la condition n'est
plus vérifiée, la boucle est interrompue et on continue le script.
Prenons un exemple.
compt=1;
9 avril 2019
while (compt<5) {
document.write ("ligne : " + compt + "<BR>");
compt++;
}
document.write("fin de la boucle");
Contact :0997721950/ 0820680397
Voyons comment fonctionne cet exemple. D'abord la variable qui nous

54
servira de compteur compt est initialisée à 1. La boucle while démarre donc
avec la valeur 1 qui est inférieure à 5. La condition est vérifiée.
On exécute les instructions des accolades. D'abord, "ligne : 1" est
affichée et ensuite le compteur est incrémenté de 1 et prend donc la valeur
2. La condition est encore vérifiée. Les instructions entre les accolades sont
exécutées. Et ce jusqu'à l'affichage de la ligne 4. Là, le compteur après
l'incrémentation vaut 5. La condition n'étant plus vérifiée, on continue dans le
script et c'est alors fin de boucle qui est affiché.
d. Break
L'instruction break permet d'interrompre prématurément une boucle for ou
while. Pour illustrer ceci, reprenons notre exemple :
compt=1;
while (compt<5) {
if (compt == 4)
break;
document.write ("ligne : " + compt + "<BR>");
compt++;
}
document.write("fin de la boucle");
Le fonctionnement est semblable à l'exemple précédent sauf lorsque le

compteur vaut 4. A ce moment, par le break, on sort de la boucle et "fin de
boucle" est affiché.
Ce qui donnerait à l'écran :
ligne : 1
ligne : 2
ligne : 3
fin de la boucle
9 avril 2019

Contact :0997721950/ 0820680397
I.V. LES FORMULAIRES

55
a. Déclaration d'un formulaire
La déclaration d'un formulaire se fait par les balises <FORM> et
</FORM>. Il faut noter qu'en Javascript, l'attribut NAME="nom_du_formulaire"
a toute son importance pour désigner le chemin complet des éléments.
En outre, les attributs ACTION et METHOD sont facultatifs pour autant
que vous ne faites pas appel au serveur. Une erreur classique en Javascript
est, emporté par son élan, d'oublier de déclarer la fin du formulaire
</FORM> après avoir incorporé un contrôle.
b. Le contrôle ligne de texte
La zone de texte est l'élément d'entrée/sortie par excellence de
Javascript. La syntaxe Html est <INPUT TYPE="text" NAME="nom" SIZE=x
MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x et
de longueur maximale de y.
L'objet text possède trois propriétés :
Propriété Description name indique le nom du contrôle par lequel on
pourra accéder. Defaultvalue indique la valeur par défaut qui sera affichée
dans la zone de texte. Value indique la valeur en cours de la zone de texte.
Soit celle tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur par
défaut.
c. Lire une valeur dans une zone de texte
Voici un exemple que nous détaillerons :
Voici une zone de texte. Entrez une valeur et appuyer sur le bouton
pour contrôler celle-ci.
Le script complet est celui-ci :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
9 avril 2019
var test = document.form1.input.value;

alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
Contact :0997721950/ 0820680397
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR> 56
<INPUT TYPE="button" NAME="bouton" VALUE="Contrôler"
onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton "contrôler", Javascript appelle la fonction

controle() à laquelle on passe le formulaire dont le nom est form1 comme
argument.
Cette fonction controle() définie dans les balises <HEAD> prend sous la
variable test, la valeur de la zone de texte. Pour accéder à cette valeur, on
note le chemin complet de celle-ci (voir le chapitre "Un peu de théorie
objet"). Soit dans le document présent, il y a l'objet formulaire appelé form1
qui contient le contrôle de texte nommé input et qui a comme propriété
l'élément de valeur value. Ce qui donne document.form1.input.value.
d. Ecrire une valeur dans une zone de texte
Entrez une valeur quelconque dans la zone de texte d'entrée. Appuyer sur le
bouton pour afficher cette valeur dans la zone de texte de sortie.
Exemple :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
9 avril 2019
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte
d'entrée <BR>

Contact :0997721950/ 0820680397
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher"

57
onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de
sortie
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton "Afficher", Javascript appelle la fonction
afficher() à laquelle on passe le formulaire dont le nom est cette fois form2
comme argument.
Cette fonction afficher() définie dans les balises <HEAD> prend sous la
variable testin, la valeur de la zone de texte d'entrée. A l'instruction suivante,
on dit à Javascript que la valeur de la zone de texte output comprise dans le
formulaire nommé form2 est celle de la variable testin. A nouveau, on a utilisé
le chemin complet pour arriver à la propriété valeur de l'objet souhaité soit en
Javascript document.form2.output.value.
oie rien du tout.
e. Le contrôle Reset
Le contrôle Reset permet d'annuler les modifications apportées aux
contrôles d'un formulaire et de restaurer les valeurs par défaut.
la syntaxe Html est :
<INPUT TYPE="reset" NAME="nom" VALUE "texte">
où VALUE donne le texte du bouton.
Une seule méthode est associée au contrôle Reset, c'est la méthode
onClick(). Ce qui peut servir, par exemple, pour faire afficher une autre valeur
que celle par défaut.
f. Le contrôle Submit
Le contrôle a la tâche spécifique de transmettre toutes les informations
9 avril 2019
contenues dans le formulaire à l'URL désignée dans l'attribut ACTION du tag

<FORM>.
<INPUT TYPE="submit" NAME="nom" VALUE "texte">
Contact :0997721950/ 0820680397
Où VALUE donne le texte du bouton.

58
Une seule méthode est associée au contrôle Submit, c'est la méthode
onClick().
g. Le contrôle Hidden (caché)
Le contrôle Hidden permet d'entrer dans le script des éléments
(généralement des données) qui n'apparaîtront pas à l'écran. Ces éléments
sont donc cachés. D'où son nom.
<INPUT TYPE="hidden" NAME="nom" VALUE "les données cachées">
9 avril 2019

Contact :0997721950/ 0820680397

Cours de Conception Web (Enregistré Automatiquement)

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cours de Conception Web (Enregistré Automatiquement)

Transféré par

Droits d'auteur :

Formats disponibles

COURS DE LABO INFORMATIQUE 2/Module de conception web

Ir Placide MWEPU : Concepteur des systèmes d’information

CHAP I GENERALITES SUR LE WEB

Internet : vient du mot anglais internetwork c.-à-d. un réseau

Au début de l'informatique, des scientifiques ont mis au point des

Un ordinateur (computer en anglais) : est une machine capable de

Il y avait plusieurs générations d’ordinateurs en fonction de

Les gros ou mini ordinateurs sont destinés aux entreprises et aux

L’apparition de l’ordinateur personnel (PC-Personal Computer) a

données, c'est le concept de réseau. Il a donc fallu mettre au point des

Ir Placide MWEPU : Concepteur des systèmes d’information

mais aussi un langage de communication pour qu'il puisse y avoir un

Des réseaux hétérogènes (de natures différentes) se sont donc

I.1.2. Définition de l’Internet

Internet est un ensemble de réseaux interconnectés utilisant une

1.1.3. Origine de l’Internet

Le réseau ARPANET (Advanced Research Projects Agency Network) est

Ir Placide MWEPU : Concepteur des systèmes d’information

(le nom de la machine dans un domaine) pour une utilisation plus

I.1.4. Les services offerts par Internet

Sur le plan pratique, Internet est un outil capable de nous rendre un

messages qu’il a reçu sur le serveur de messagerie hébergeant sa

Ir Placide MWEPU : Concepteur des systèmes d’information

o IMPAP (Internet Mail Access Protocol) un autre protocole qui permet

On assigne à chacun de ces protocoles un numéro (le port) qui est

Les paquets HTTP arrivent sur le port 80 et sont transmis au

I.15.. Avantages de l’Internet

Accès à l'information d’une manière continue et à partir de n’importe

I.1.6. Fonctionnement de l’Internet

Internet est un réseau basé sur le modèle client / serveur :

L'ordinateur client, utilise un logiciel spécifique (le navigateur : par

pour aller chercher l'information numérique auprès d'un autre ordinateur

Nommage des ressources Internet

Classes de secteurs d’activités :

Le paiement d'un forfait annuel garantit la protection du nom de

Ir Placide MWEPU : Concepteur des systèmes d’information

Se connecter au serveur Google, on utilise le nom de la machine comme

I.1.7. Connexion à Internet

Pour se connecter à Internet, il existe plusieurs méthodes :

La connexion par modem en utilisant le réseau téléphonique

I.2.1. Différence entre l’Internet et le web

Le web n’est pas Internet. Internet comme nous l’avons vu est un

Le web n’est qu’une application parmi les applications mises en œuvre

Ir Placide MWEPU : Concepteur des systèmes d’information

I.2.2. Origine du web

I.2.3. Contenu du web

World Wide Web (ou WWW ou Web) est constitué de milliards de

ATTENTION : il n'existe pas de contrôle centralisé sur le web : n'importe qui

I.2.4. Les caractéristiques du web

Navigation hypertexte : des marques de renvoi (appelés liens

I.2.5. Les pages web

Une page web est un document électronique écrit dans un langage

informatique appelé HTML (HyperText Markup Language).

Ir Placide MWEPU : Concepteur des systèmes d’information

Une page peut contenir du texte, des graphiques, de la vidéo, des

I.2.6. Les sites web

Un site web est un ensemble de pages web reliées entre elles et

le web. Il fait l’interface entre le client web et le serveur web. La

Ir Placide MWEPU : Concepteur des systèmes d’information

Chap II LANGAGE HTML

HTML(Hypertext Markup language) : est un langage de description

Les avantages du langage HTML sont nombreux :

 Peux couteux : en effet un simple éditeur de texte suffit pour écrire

Le terme markup se réfère aux marques, aux annotations manuscrites