Support de cours - WordPress.com · Chapitre 2 : Le développement Web I. Introduction Ce chapitre est conçu pour étudier le principe de fonctionnement du web et définir les différents

Programmation web 1

Support de cours

Elaboré par:

HHHHEEEECHKELCHKELCHKELCHKEL AAAAminaminaminamina (Assistante Technologue à ISET Mahdia)

Département : Informatique

Licence : Technologie de l’Informatique

Niveau : Première année

Volume horaire : 11.25 h Cours + 11.25h TD

Coefficient : 2

Année Universitaire : 2009/2010

Programmation web 1

Direction Générale des Etudes Technologiques

----*---- Institut supérieur des Etudes

Technologiques de Mahdia

République tunisienne ----*----

Ministère de l’Enseignement Supérieur et de la recherche

scientifique

Programmation web 1

Mlle Hechkel Amina Page 7

Table des matières

Chapitre1 : Les services Internet ............................................................................................................... 6

I. Introduction .................................................................................................................................................................. 7

II. Terminologie et définition ...................................................................................................................................... 7

1. Internet .......................................................................................................................................................... 7

2. Protocole de communication ........................................................................................................................ 7

3. Réseau ........................................................................................................................................................... 8

III. Les services Internet ............................................................................................................................................ 8

1. Le web .......................................................................................................................................................... 8

2. La messagerie électronique (e-mail ou encore mail) .................................................................................... 8

3. Le transfert des fichiers ................................................................................................................................ 8

4. Les forums ..................................................................................................................................................... 9

5. Le chat (IRC) ................................................................................................................................................... 9

IV. Conclusion ............................................................................................................................................................... 9

Chapitre 2 : Le développement Web ...................................................................................................... 10

I. Introduction ............................................................................................................................................................... 11

II. Principe de fonctionnement du web (architecture Client/serveur) ................................................... 11

1. Qu'est-ce qu'un serveur ? ........................................................................................................................... 11

2. Qu'est-ce qu'un client ? ............................................................................................................................... 11

3. Qu'appelle-t-on architecture client/serveur ? ............................................................................................ 11

III. Le langage HTML/XHTML .............................................................................................................................. 11

1. Le HTML ...................................................................................................................................................... 11

2. Le XHTML ..................................................................................................................................................... 12

IV. Feuilles de styles en cascades CSS ............................................................................................................... 13

1. Définition .................................................................................................................................................... 13

2. Utilisation ................................................................................................................................................... 13

Exemple: .......................................................................................................................................................... 14

V. Le JavaScript/ VBScript ......................................................................................................................................... 15

1. JavaScript .................................................................................................................................................... 15

2. VBscript ...................................................................................................................................................... 15

VI. Les langages dynamiques .............................................................................................................................. 15

1. Qu'est ce qu'un langage statique ou côté client? ....................................................................................... 15

Programmation web 1


2. Qu'est ce qu'un langage dynamique ou côté serveur? .............................................................................. 15

3. PHP ............................................................................................................................................................. 15

4. CGI .............................................................................................................................................................. 16

VII. Les éditeurs de sites (WYSIWYG) ................................................................................................................ 16

VIII. Conclusion ............................................................................................................................................................ 16

TD N°1 : Les listes et les tableaux ........................................................................................................................... 17

Éléments Correction TD N°1 : Les listes et les tableaux................................................................................. 19

TD N°2 : Les Frames et les Formulaire ................................................................................................................. 22

Eléments de Correction TD N°2 : Les Frames et les Formulaire................................................................. 23

Annexe : Rappel du HTML ......................................................................................................................................... 25

Chapitre 3 : La conception d’un site Web ............................................................................................. 31

I. Introduction ............................................................................................................................................................... 31

II. Schéma global ........................................................................................................................................................... 31

1. Objectifs ..................................................................................................................................................... 32

2. Public visé ................................................................................................................................................... 32

3. Contenu rédactionnel ................................................................................................................................ 33

4. Présentation visuelle .................................................................................................................................. 33

5. Aspect fonctionnel ..................................................................................................................................... 33

III. Découpe de l'information ............................................................................................................................... 34

IV. Structure ................................................................................................................................................................ 34

1. Structure séquentielle ................................................................................................................................ 34

2. Structure hiérarchisée ................................................................................................................................ 35

3. Structure en réseau .................................................................................................................................... 35

4. Structure en évolution (équilibrée) ............................................................................................................ 36

V. Les outils de navigation......................................................................................................................................... 36

VI. Page d’accueil ...................................................................................................................................................... 37

VII. Résolution d'écran ............................................................................................................................................. 37

VIII. Zone de sécurité ................................................................................................................................................. 38

IX. Mise en page ......................................................................................................................................................... 39

1. Le point de vue du classique ...................................................................................................................... 39

2. Le point de vue du "délire" ........................................................................................................................ 39

3. Frames ou tableaux .................................................................................................................................... 39

4. Typographie ............................................................................................................................................... 40

X. Les différents types de site .................................................................................................................................. 40

Programmation web 1


1. Moteur de recherche/ Métamoteur .......................................................................................................... 40

2. Annuaire web ............................................................................................................................................. 41

3. Site marchand (e-commerce) ..................................................................................................................... 41

4. Site éducatif ............................................................................................................................................... 41

5. Site publicitaire .......................................................................................................................................... 41

XI. Conclusion ............................................................................................................................................................ 42

TD N°3 : Conception d’un site web ......................................................................................................................... 43

Éléments de correction TD N°3 ............................................................................................................................... 45

Chapitre 4 : Hébergement et référencement d’un site web ................................................................. 47

I. Introduction ............................................................................................................................................................... 48

II. Définitions .................................................................................................................................................................. 48

III. Hébergement d’un site web ........................................................................................................................... 48

IV. Les étapes de référencement......................................................................................................................... 49

V. Conclusion .................................................................................................................................................................. 51

Bibliographique/ Webographie .............................................................................................................. 52

Programmation web 1


Liste des figures

Figure 1 : Schéma global ............................................................................................................................................. 31

Figure 2 : Structure séquentielle ............................................................................................................................. 34

Figure 3 : Structure hiérarchisée ............................................................................................................................ 35

Figure 4: Structure en réseau ................................................................................................................................... 35

Figure 5: structure équilibrée .................................................................................................................................. 36

Figure 6: Outils de navigation .................................................................................................................................. 36

Figure 7: Résolution 800x600 .................................................................................................................................. 38

Figure 8 : Résolution 640x480 ................................................................................................................................. 38

Figure 9: Résolution 640x480 .................................................................................................................................. 38

Figure 10 : Résolution 800x600 .............................................................................................................................. 38

Figure 11 : Zone de sécurité du navigateur......................................................................................................... 39

Programmation web 1

Chapitre1 : Les services Internet

Objectifs :

� Connaitre les principes d’Internet, Protocole de communication et de réseau.

� Comprendre les concepts de base du web

� Enumérer les services Internet

Eléments de contenu :

I. Introduction

II. Terminologie et définition

1. Internet

2. Protocole de communication

3. Réseau

III. Les services Internet

1.Le web

2. La messagerie électronique (e-mail ou encore mail)

3. Le transfert des fichiers

4. Les forums

5. Le chat (IRC)

IV.Conclusion

Programmation web 1


Chapitre1 : Les services Internet I. Introduction

Les bases de l’internet nommé le réseau des réseaux ont été définies en 1969 avec le projet

« ARPANET ». L’Internet est aujourd’hui le premier réseau mondial accessible à tous le monde. Dans

ce chapitre on va présenter les différents services offerts par l’Internet tels que le web, le courrier

électronique, le transfert des fichiers, le forum, le chat,…etc.

II. Terminologie et définition

1. Internet

C’est le réseau informatique mondial qui rend accessibles au public des services variés comme le

courrier électronique, la messagerie instantanée, ou le World Wide Web, en utilisant le protocole de

communication IP (Internet Protocol). Son architecture technique repose sur une hiérarchie de

réseaux.

L'accès à Internet peut être obtenu grâce à un fournisseur d'accès à Internet via divers moyens de

télécommunication : soit filaire (réseau téléphonique à bas débit, ADSL, fibre optique jusqu'au

domicile...), soit sans fil (Wi-Fi, WiMAX, Internet par satellite, 3G+...). Un utilisateur d'Internet est

désigné le néologisme « internaute ».

2. Protocole de communication

Dans les réseaux informatiques et les télécommunications, un protocole de communication est

une spécification de plusieurs règles pour un type de communication particulier. Initialement, on

nommait protocole ce qui est utilisé pour communiquer sur une même couche d'abstraction entre deux

machines différentes.

Les protocoles de communication les plus utilisés sont les protocoles réseau. Un protocole réseau

est un protocole de communication mis en œuvre sur un réseau informatique. Il est possible que

plusieurs protocoles réseau forment des couches de protocoles.

L’Internet est un ensemble de protocoles tels que : IP : Internet Protocol, TCP: Transport Control

Protocol, UDP: User Datagram Protocol, ARP: Address Resolution Protocol, FTP: File Transfer

Protocol, HTTP: Hypertext Transfer Protocol, SNMP: Simple Network Management Protocol, SMTP:

Simple Mail Transfer Protocol.

Programmation web 1


3. Réseau

Un réseau est un ensemble de nœuds (ou pôles) reliés entre eux par des liens (canaux). Les

nœuds peuvent être des points massiques simples ou des sous-réseaux complexes. Les canaux sont à

leur tour des flux de force, d'énergie ou d'information.

III. Les services Internet

1. Le web

Le World Wide Web, appelé le Web est un système hypertexte public fonctionnant sur Internet.

Le WWW a été définit en 1989 comme une technologie qui permet à partir d’un logiciel client appelé

navigateur (browser) d’accéder facilement à des pages mises en ligne dans des sites stockés sur un

serveur connecté à l’internet.

Le Web n’est qu’une des applications d’Internet. D’autres applications d’Internet sont le courrier

électronique, la messagerie instantanée, Usenet, etc. Le Web a été inventé plusieurs années après

Internet, mais c’est lui qui a rendu les médias grand public attentifs à Internet. Depuis, le Web est

fréquemment confondu avec Internet ; en particulier, le mot Toile est souvent utilisé dans les textes

non techniques sans qu’il soit clairement exprimé s’il désigne le Web ou Internet.

2. La messagerie électronique (e-mail ou encore mail)

Le courrier électronique ou courriel est un service de transfert de messages envoyés par un

système de messagerie électronique via un réseau informatique (principalement l'Internet) dans la

boîte aux lettres électronique d’un destinataire choisi par l’émetteur.

C’est utiliser l'Internet comme on utilise la poste. Il est possible de déposer un message dans la

boîte aux lettres de son correspondant, qu'il soit ou non devant une machine. Ce dernier sera capable, à

sa prochaine connexion, de consulter sa boîte aux lettres pour lire ou envoyer des messages à ses

correspondants.

3. Le transfert des fichiers

Le transfert des fichiers est un service Internet utilisant le protocole FTP : File Transfer Protocol

(protocole de transfert de fichiers), un protocole de communication destiné à l'échange informatique

de fichiers sur un réseau TCP/IP. Ce service permet, depuis un ordinateur, de copier des fichiers vers

Programmation web 1


un autre ordinateur du réseau, d'alimenter un site web, ou encore de supprimer ou de modifier des

fichiers sur cet ordinateur.

Le service d'échange de fichiers permet de déposer des fichiers sur une machine distante, mais

aussi, et c'est le plus fréquent de télécharger des fichiers sur sa machine. La distribution de logiciels

gratuits, la diffusion d'images, de sons, de notes de cours pour les étudiants ou d'articles scientifiques

sont parmi les utilisations les plus courantes de ce service.

4. Les forums

C’est un service permettant l'échange et la discussion sur un thème donné : chaque utilisateur peut

lire à tout moment les interventions de tous les autres et apporter sa propre contribution sous forme

d'articles.

5. Le chat (IRC)

Définition 1: Le chat est un service Internet basé sur le protocole IRC, abréviation de Internet

Relay Chat (en français, « discussion relayée par Internet »), est 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 des 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. IRC est

différent de la messagerie instantanée, celle-ci étant plus dédiée aux communications de un à un.

Définition 2 :(Internet Relay Chat), application qui permet à différents Internautes de dialoguer.

Cela se présente sous forme de messages qui s'affichent en temps réel et permettent donc une réponse

immédiate de l'interlocuteur.

IV. Conclusion

Dans ce chapitre nous avons défini le réseau Internet, ses divers protocoles ainsi que ses différents

services tels que le web, l’email, le transfert des fichiers, …etc. Ce chapitre introductif va nous guider

vers plus de détails sur la conception, le développement et l’hébergement des sites web ainsi que ses

différents types dans les prochains chapitres.

Programmation web 1


Chapitre 2 : Le développement Web

Objectifs :

� Comprendre le principe de fonctionnement du web

� S’initier avec les langages de programmation web

� Connaitre quelques éditeurs de sites


I. Introduction

II.Principe de fonctionnement du web (architecture Client/serveur)

1. Qu'est-ce qu'un serveur ?

2. Qu'est-ce qu'un client ?

3. Qu'appelle-t-on architecture client/serveur ?

IV.Le langage HTML/XHTML

1.Le HTML

2. Le XHTML

V.Feuilles de styles en cascades CSS

VI.Le JavaScript/ VBScript

1. JavaScript

2.VBscript

VII. Les langages dynamiques

1. Qu'est ce qu'un langage statique ou côté client?

2.Qu'est ce qu'un langage dynamique ou côté serveur?

3. PHP

4.CGI

VIII. Les éditeurs de sites

IX. Conclusion

Programmation web 1


Chapitre 2 : Le développement Web

I. Introduction

Ce chapitre est conçu pour étudier le principe de fonctionnement du web et définir les différents

langages de développement web (HTML, XHTML, CSS, JavaScript, PHP, CGI,…etc.) ainsi que les

éditeurs de sites existants.

II. Principe de fonctionnement du web (architecture Client/serveur)

1. Qu'est-ce qu'un serveur ?

On appelle logiciel serveur un programme qui offre un service sur le réseau. Le serveur accepte

des requêtes, les traites et renvoie le résultat au demandeur. Le terme serveur s'applique à la machine

sur lequel s'exécute le logiciel serveur.

Pour pouvoir offrir ces services en permanence, le serveur doit avoir un accès permanent et

s'exécuter en permanence.

2. Qu'est-ce qu'un client ?

On appelle logiciel client un programme qui utilise le service offert par un serveur. Le client

envoie une requête et reçoit la réponse. Le client peut-être raccordé par une liaison temporaire.

3. Qu'appelle-t-on architecture client/serveur ?

C'est la description du fonctionnement coopératif entre le serveur et le client. Les services internet

sont conçus selon cette architecture. Ainsi, chaque application est composée de logiciel serveur et

logiciel client. A un logiciel serveur, peut correspondre plusieurs logiciels clients développés dans

différents environnements: Unix, Mac, PC...; la seule obligation est le respect du protocole entre les

deux processus communicants. L’architecture Client /serveur est la principale architecture du web.

III. Le langage HTML/XHTML

1. Le HTML

Le principe général d'HTML est très simple: le texte (le contenu) est structuré par des balises qui

en définissent la structure. Toutes les pages HTML utilisent la même structure de base:

• Le conteneur <html> contient la totalité du document HTML.

• Le conteneur <head> contient des informations n'apparaissant pas sur la page HTML, mais la

décrivant. Ces informations sont utilisées par exemple par les moteurs de recherche. Ce

conteneur inclus en particulier la balise de titre <title> .

Programmation web 1


• Le conteneur <body> contient ce qui doit être affiché: texte, images, sons...

La structure d'une page HTML basique est constitué des balises que voici: [1]

<html>

<head>

<title> Ma première page </title>

<meta http-equiv="Content-Type" content="text/html; char set=iso-8859-1" / >

</head>

<body>

……………………

</body>

</html>

De plus, HTML est un langage hypertexte. Cela signifie qu'il est possible de définir des liens entre

plusieurs documents ou au sein d'un même document. Les documents pointés par les liens peuvent se

situer sur des machines éloignées, faisant partie d'Internet.

2. Le XHTML

Avec l’apparition de nouveau terminaux pour visualiser des pages web (PDA, téléphone, …) et le

besoin incessant de nouvelles fonctionnalités, HTML a fini par montrer ces limites en matière

d’évolutivité. Pour pallier cet écueil, un nouveau langage de description a vu le jour XHTML

(Extensible HyperText Markup Language) (début 2000). C’est un mixe entre HTML et XML, c'est-à-

dire que l’on retrouve toutes les fonctionnalités disponible dans HTML 4.01 mais avec la syntaxe, la

rigueur et la souplesse d’évolution fournit par XML.

En XHTML on utilise un DOCTYPE permettant de dire au navigateur que la page est du XHTML et

quelle est la version que vous utilisez.

<!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang ="fr" > <head> <title>Ma première page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> </body>

</html>

La balise d'ouverture <html> est remplacé par <html xmlns="http://www.w3.org/1999/xhtml"

xml:lang="fr" > xmlns : attribut obligatoire indiquant une adresse traitant du XHTML et notament le

W3C.

Programmation web 1


xml:lang : attribut permettant d'indiquer dans quelle langue est rédigée votre page.

On citera par la suite quelques balises XHTML.

IV. Feuilles de styles en cascades CSS

1. Définition

C’est un standard qui a récupéré la fonction de paramétrage du style (encodage de la forme). Le

style peut être inclus dans l'encodage de la structure (près des éléments) ou externalisé dans une entité-

document à part entière qu’on appelle feuille de style CSS.

Cette technologie a été introduit par Microsoft, le but est de modifier le contenu d'une page par

une grande variété d'effets surprenants (Dynamic HTML) et cela en un clin d'œil. En fait avec les

feuilles de styles (CSS ou Cascading Style Sheets), On peut contrôler parfaitement la mise en page

des différents éléments qui composent le document, par exemple on peut définir la couleur d'une

police, sa taille, le positionnement d'un objet (image, texte, ...) et l'espacement entre les paragraphes.

2. Utilisation

Les déclarations CSS se font entre les balises <style type="text/css"> et </style>.

Dans un fichier annexe (soit style.css ce fichier), `a mettre dans le HEAD :

<link href="style.css" rel="stylesheet" type="text/css">.

<P style="text-align:right">..</P> déclaration locale.

Programmation web 1


Exemple:

<style type="text/css"> BODY {

background-color : white ; font-family : Verdana ; font-size : 12px ; font-style : italic ; font-weight : bold ; }

IMG { border-size : 1px ; border-style : solid ; border-color : black ; }

A.special { text-decoration : overline ; }

</style> La notation pointée (A.special) définit un style pour les liens étant de cette classe. Pour définir un

lien de type spécial, il faut le noter ainsi : <A CLASS="special" HREF=...>...</A>

Programmation web 1


V. Le JavaScript/ VBScript

Les langages de script (VBScript, Javascript) sont des standards qui permettent de définir le

comportement dans le temps du contenu du document. Les scripts peuvent être définis à l'intérieur de

la structure du contenu, ou également externalisés sous forme d'entités-documents à part entière.

Notation :

<SCRIPT language="javascript" type="text/javascript ">



</SCRIPT>

1. JavaScript

JavaScript est un langage de scripts qui est incorporé aux balise HTML, permet d’améliorer la

présentation et l’interactivité des pages Web (tel que la communication avec les navigateurs). Un code

JavaScript permet de :

- Contrôler la saisie dans un formulaire.

- Accéder aux objets de navigateur.

- Exécuter des commandes du coté client (date système, gestion de la fenêtre, gestion de

navigateur).etc.

2. VBscript

Visual Basic Script : Langage de script d'une syntaxe similaire à Visual Basic qui a été conçu pour

concurrencer JavaScript afin d'insérer des éléments interactifs dans les documents HTML.

VI. Les langages dynamiques

1. Qu'est ce qu'un langage statique ou côté client?

C'est un langage qui n'utilise pas de serveur pour exécuter son code, ex : HTML, JavaScript, pour

exécuter une page en HTML simple qui est sur votre bureau, il vous suffit de double-cliquer dessus

pour voir le résultat.

2. Qu'est ce qu'un langage dynamique ou côté serveur?

C'est un langage qui doit utiliser un serveur pour exécuter son code, ex : ASP, PHP, CGI, ASP.net,

JSP etc., pour exécuter une page dans un de ces langages, il faut avoir un serveur web (IIS, Apache,

etc.) plus un module qui retranscrira les commandes du langage en actions (ex : envoi de mail, ajout

dans une base) et en code HTML.

3. PHP

Programmation web 1


Le langage PHP est créé en 1994. C’est un langage de programmation utilisé principalement en

tant que langage de script côté serveur, ce qui veut dire que c'est le serveur (la machine qui héberge la

page Web en question) qui va interpréter le code PHP et générer du code (constitué généralement

d'XHTML ou d'HTML, de CSS, et parfois de JavaScript) qui pourra être interprété par un navigateur.

Il permet de créer des pages Web dynamiques. PHP atteint maintenant la version 5.

4. CGI

La Common Gateway Interface (littéralement « Interface passerelle commune »), généralement

abrégée CGI , est une interface normalisée utilisée par les serveurs HTTP. Ce dernier, au lieu

d'envoyer le contenu d'un fichier (page HTML, image...), exécute un programme puis retourne le

contenu généré, comme s'il s'agissait d'un contenu de fichier. CGI est le standard industriel qui indique

comment transmettre la requête du serveur HTTP au programme et comment récupérer la réponse

générée.

VII. Les éditeurs de sites (WYSIWYG)

WYSIWYG est l’acronyme de la locution anglaise What you see is what you get, signifiant

littéralement en français «ce que vous voyez est ce que vous obtenez» ou de façon plus concise « tel

affichage, tel résultat ». Ceci désigne les interfaces utilisateur graphiques permettant de composer

visuellement le résultat voulu, typiquement pour un logiciel de mise en page, un traitement de texte ou

d’image.

Un éditeur HTML (ou éditeur Web) est un logiciel conçu pour faciliter la préparation et la

modification de documents écrits HTML.

L'édition des images, des animations ou du son sont effectuées avec les logiciels appropriés. Un

éditeur HTML ne sert qu'à disposer ces ressources dans une page Web.

Les pages offrant des services en plus de simples informations sont généralement générées à la

demande par des logiciels propres au site Web. Ces logiciels utilisent fréquemment les technologies

PHP, ASP, JSP, CGI ou Perl et sont édités avec les logiciels appropriés.

Les éditeurs de sites les plus connus sont Frontpage, NVU et Dreamweaver.

VIII. Conclusion

Au cours de ce chapitre, on a vu le principe de fonctionnement du web ainsi que les langages de

programmation web les plus populaire tel que le XHTML, le CSS, JavaScript, PHP, Jsp, et le CGI, en

faisant la différence entre un langage statique et un langage dynamique. Il nous reste qu’entamer la

partie consacré pour la conception d’un site web et ses différentes étapes.

Programmation web 1


TD N°1 : Les listes et les tableaux EXERCICE 1:

1- Ecrire le code html qui correspond à cette figure.

2- Ecrire le code html qui correspond à cette figure

3- Soit le code HTML suivant:

1<head> 2<title>1+1 > 2</title> 3</head> 4<body> 5<h2>premier exemple</h2> 6<table widht="80%" border=1 > 7<tr colspan="2"><td>cellule1.1</td> 8<td>cellule1.2</td></tr> 9<td>cellule2.0</td><td/> 10</table> 11<h2>2eme & 3eme exemple</h2> 12<ol> 13<li>1</li><ul> 14<li>a</li></ul> 15<vi>2</vi> 16<ol> 17<body/> 18</html>

Programmation web 1


a- Ce code ne respecte aucune norme HTML connue. Découvrez et analysez les erreurs présentes

dans ce code.

b- Réécrire une page HTML valide en utilisant les informations présentes dans ce code.

EXERCICE 2 : Ecrire le code html de chaque tableau :

a- avec la bordure est égale à 3 et l’espace entre les cellules est égal 30

b- avec la bordure est égale à 2 et l’espace entre les cellules est égal 20

c- avec la bordure est égale à 1

Titre2 : les résultats

d-utiliser l’image (image.jpg) et la couleur jaune comme arrière plan des cellules. La bordure du

tableau général est égale à 1 et il faut se décider pour les autres et l’espace entre les cellules est égal

10.

Programmation web 1


Éléments Correction TD N°1 : Les listes et les tableaux EXERCICE 1: 2-

<HTML> <HEAD> <TITLE>liste</TITLE> </HEAD> <BODY> <ol> <li> Thé</li> <li> Café</li> <ul type="disc"> <li> Noir</li> <ul type="square"> <li> avec du sucre</li> <ul type="circle"> <li> Blanc</li> <li> Roux</li> <li> Noir</li> </ul> <li> sans sucre</li> </ul> <li> Au lait</li> <ul type="square"> <li> avec du sucre</li> <li> sans sucre</li> </ul> </ul> <li> Chocolat</li> </ol> </BODY> </HTML>

3-a) ligne1 : balise html manquante ligne2 : ‘>’ est inutile ligne6 : attribut incorrect ligne7 : attribut mal placé ligne8 : balise tr mal placée ligne9 : balise td mal placée ligne15 : balise mal écrite ligne16 : fermeture de la balise ol manquante ligne17 : balise de fermeture body incorrecte b)

<html> <head> <title> 2</title> </head> <body> <h2>premier exemple</h2> <table width="80%" border=1> <tr ><td colspan="2">cellule1.1</td></tr> <tr><td>cellule2.1</td> <td>cellule2.2</td></tr> </table> <h2>2eme & 3eme exemple</h2> <ol> <li>1</li><ul>

Programmation web 1


<li>a</li></ul> <li>2</li> </ol> <body/> </html>

EXERCICE 2: c-

<html> <head> <title> Tableau 2-C</title> </head> <body> <TABLE border=1 > <caption align="bottom">Titre2: <u>les résultats</u ></caption> <TR><TH rowspan="2" colspan="2">Population</TH><TH colspan="2" align="center"> Moyenne</TH></TR> <TR><TH>Hauteur en cm</TH><TH>Largeur en cm</TH></T R> <TR><TH rowspan="2">sexe</TH><TH>Masculin</TH><TD align="center">1,78</TD><TD align="center">70</TD>< /TR> <TR><TH>Féminin</TH><TD align="center">1,70</TD><TD align="center">80</TD></TR> </TABLE> <body/></html>

d- <HTML> <HEAD> <TITLE>Bienvenue dans l'estuaire de Seine</TITL E> </HEAD> <BODY> <TABLE width="100%" border="1" cellpadding=10> <TR bgcolor="yellow" align="center" > <TD>tableau</TD><TD>Définir une bordure</TD><TD>Déf inir l'espacement</TD> </TR> <TR align="center" cellpadding=10> <TD> <TABLE> <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </TD> <TD> <TABLE border=2 > <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </TD> <TD BACKGROUND="image.jpg"> <TABLE border=2 cellspacing=10 cellpadding=10 > <TR><TD>1</TD><TD>2</TD></TR> <TR><TD>3</TD><TD>4</TD></TR> </TABLE> </TD> </TR> <TR bgcolor="yellow" align="center"> <TD>Définir la couleur de font</TD> <TD>Définir la largeur et la hauteur</TD> <TD>Les opérations de fusion</TD> </TR> <TR align="center"> <TD><TABLE border=2 cellpadding=10 bgcolor="blue"> <TR bgcolor="yellow"><TD bgcolor="red">1</TD><TD>2< /TD></TR>

Programmation web 1


<TR><TD>3</TD><TD>4</TD></TR> </TABLE></TD> <TD> <TABLE border=1 width=60% > <TR><TD>1</TD><TD>2</TD><TD>3</TD></TR> </TABLE> </TD> <TD> <TABLE border=1 width=60% > <TR><TD colspan=3>1</TD></TR> <TR><TD width=33%>1</TD><TD width=33%>2</TD><TD wid th=34%>3</TD></TR> </TABLE> <BR> <TABLE border=1 width=60% > <TR> <TD width=33% rowspan=2 align="center" valign=middl e>1</TD> <TD width=33%>2</TD> <TD width=34%>3</TD> </TR> <TR> <TD width=33%>4</TD> <TD width=34%>5</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

Programmation web 1


TD N°2 : Les Frames et les Formulaire EXERCICE 1:

Ecrire le code HTML de la page index.html permettant d’afficher l’interface ci-dessous. Cette page

contient quatre frames :

� frame vers menu.html

� frame vers top.html

� frame vers coordonne.html.

� frame vers right.html

EXERCICE 2: Ecrire le code HTML de la page suivante :

Cadre "top" (70%)

Cadre "right" (20%)

Cadre "menu" (20%)

Programmation web 1


Eléments de Correction TD N°2 : Les Frames et les Formulaire Exercice n°1 :

<html> <head> <title>Iset de mahdia</title> </head> <frameset cols=15%,70%,15%> <frame src=menu.htm> <frameset rows=80%,*> <frame src=> <frame src=coordonnee.html name=frame1> </frameset> <frame src=entete.htm> </frameset> </html>

Exercice n°2 :

<html> <head> <title>page d'inscription</title> </head> <body> <form> <table> <caption align="top"><h3><u>Inscription</u></h3></c aption> <tr> <th ALIGN="RIGHT">Login:</th> <td><input type=text size="20"> </td> </tr> <tr> <th ALIGN="RIGHT">Mot de passe:</th> <td><input type=password size="20"> </td> </tr> <tr> <th ALIGN="RIGHT">Age:</th> <td><input type=int size="20"> </td> </tr> <tr> <th ALIGN="RIGHT">Ville :</th> <td><Select name=cboVille> <option value=01>Tunis</option> <option value=02 Selected> choisir votre ville </option> <option value=01>Sfaxe</option> </Select> </td> </tr> <tr> <th ALIGN="RIGHT">Sexe:</th> <td><input type=radio size="20">masculin <input t ype=radio size="20">Féminin</td> </tr> <tr> <th ALIGN="RIGHT" VALIGN="BOTTOM">Commentaire:</th> <td><TEXTAREA NAME="Comment" COLS="16" ROWS="3">En trez ici votre commentaire</TEXTAREA></td> </tr> <tr> <th ALIGN="RIGHT" rowspan="2">Activité:</th>

Programmation web 1


<td><input type=checkbox size="20">Sport <input t ype=checkbox size="20" checked>Music</td> </tr> <tr> <td><input type=checkbox size="20">Lecture <input type=checkbox size="20">Astronomie</td> </tr> <tr> <td colspan="2" align="center"><INPUT TYPE="SUBMIT" VALUE="Valider l'inscription"> </td> </tr> </table> </form> </body> </html>

Programmation web 1


Annexe : Rappel du HTML Voici une liste des balises HTML les plus courantes avec leurs attributs les plus utilisés. Légende pour les balises de fin :

• V => Obligatoire • X => Interdite • ? => Optionnelle

(Même si certaines balises de fin sont optionnelles, il est quand même conseillé des les utiliser...)

Nom Fonction Balise de fin

 Permet de placer dans le code source d'une page des commentaires qui ne seront pas affichés dans le navigateur.

V

Attributs : /

Exemple : <! -- Voici un texte qui ne sera pas affiché par le nav igateur -->

A Crée un lien hypertexte vers une autre page web ou vers un ancre.

V

Attributs : href, name, target

Exemple : <a href="http://www.editeurjavascript.com " target="_blank">L'éditeurJavaScript</a>

B Pour avoir du texte en gras. V

Attributs : /

Exemple : <b>Texte en gras...</b>

BIG Augmente légèrement la taille du texte. V

Attributs : /

Exemple : <big>Texte un peu plus grand...</big>

BLOCKQUOTE Applique un retrait à un texte. V

Attributs : /

Exemple : <blockquote>Texte qui sera e n retrait...</blockquote>

BODY Définit le corps (contenu affichable) de votre page web. Il doit venir juste après l'en-tête de la page HEAD.

V

Attributs : bgcolor, background, alink, link, vlink , text

Exemple : <body>Contenu de votre page...</body>

BR Ajoute un saut de ligne. X

Attributs : /

Exemple : Ligne1...<br>Ligne2...

CENTER Centre le texte. V

Programmation web 1


Attributs : /

Exemple : <center>Voici un texte centré</center>

DIV Regroupe des éléments pour en contrôller la structu re avec des feuilles de styles par exemple.

V

Attributs : id, class

Exemple : <div class="menu">Contenu de votre menu</ div>

FONT Permet de mettre de modifier du texte (couleur, taille, police,...).

V

Attributs : color, face, size

Exemple : <font size=2 color="#ff0000" face ="Verdana">Texte en taille 2 écrit en rouge avec la police Verdana</font>

FORM Permet de créer un formulaire. V

Attributs : action, method, enctype, name, target

Exemple : <form action="fichier.php" method="POST"> vos champs input</form>

H1 -> H6 Définit 6 niveaux pour les titres. Chaque niveau possède son propre style.

V

Attributs : align

Exemple : <h1>Titre</h1>

HEAD Définit l'en-tête de votre document. Ces informatio ns ne seront pas affichées par le navigateur.

V

Attributs : /

Exemple : <he ad>en - tête de la page(titre, méta, style, script,...)</he ad>

HR Place une séparateur horizontal. X

Attributs : align, size, width, color (seulement IE )

Exemple : <hr size=2 width=250 align="center">

HTML Indique que le fichier est un document HMTL. V

Attributs : /

Exemple : <html>tout le code de votre page</html>

I Met le texte en italique. V

Attributs : /

Exemple : <i>texte en italique</i>

IMG Ajoute une image dans votre page. X

Attributs : src, border, width, height, alt, align, hspace, vspace

Exemple : <img src="image.gif" border=0 width=88 he ight=31 alt="Alternative">

INPUT Ajoute un champ de formulaire (plusieurs types sont disponibles).

X

Attributs : type, name, value, checked, size, maxle ngth

Exemple : <input type="text" name= "nom" value="Votre nom" size=25

Programmation web 1


maxlength=40>

LI Crée un nouvel élément pour une liste. ?

Attributs : value

Exemple : <li> Element de la liste(</>)

LINK Permet de créer un lien vers un fichier externe (un e feuille de style par exemple).

X

Attributs : type, href, rel

Exemple : <link href="style.css" rel="stylesheet" t ype="text/css">

MARQUEE Permet de faire défiler un texte (IE uniquement). ?

Attributs : direction, behavior, loop

Exemple : <marquee direction="right" behavior="scro ll" loop=2>Tex te défilant(</marquee>)

META Définit des paramètres supplémentaires dans l'en-tê te de votre page (très utile pour le référencement).

X

Attributs : name, content, http - equiv, url (seulement IE)

Exemple : <meta name="description" content="Descrip tion po ur les moteurs de recherches">

OL Crée une liste numérotée. V

Attributs : type, start

Exemple : <ol type="a">vos éléments de liste</ol>

OPTION Crée un nouveau choix dans un SELECT. ?

Attributs : value, selected

Exemple : <option value="choix1" se lected>Webmaster (</option>)

P Constitue un nouveau paragraphe. ?

Attributs : align, class

Exemple : <p align="center">texte du paragraphe (</ p>)

SELECT Crée une liste de sélection dans un formulaire. V

Attributs : name, multiple, size

Exemple : <select name="choix" size=3>vos balises OPTION</sel ect>

SMALL Diminue sensiblement la taille du texte (au contrai re de BIG).

V

Attributs : /

Exemple : <small>texte plus petit</small>

SPAN Facilite la mise en forme (similaire à DIV pour des portions de textes plus courtes).

V

Attributs : id, class

Exemple : <span class="normal">texte écrit en "norm al"</span>

STRONG Affiche le texte en gras (similaire à B). V

Attributs : /

Programmation web 1


Exemple : <strong>texte en gras</strong>

STYLE Permet de définir des règles de style à utiliser su r le document.

V

Attributs : type

Exemple : <style type="text/css">vos éléments de st yle</style>

TABLE Crée un tableau. V

Attributs : align, border, cellpadding, cellspacing , bgcolor, width, bordercolor (IE uniquement), background (IE uniquem ent)

Exemple : <table width="98%" border=1 cellpadding=3 cellspacing=0 align="center">vos celulles</table>

TD Crée une nouvelle celulle dans un tableau. ?

Attributs : align, valign, bgcolor, colspan, rowspa n, width, height

Exempl e : <td align="center" valign="top" colspan=2 width="50%">contenu</td>

TEXTAREA Crée une zone de texte dans un formulaire. V

Attributs : rows, cols, name

Exemple : <textarea name="commentaire" cols=50 rows =5>votre texte</textarea>

TITLE Détermine le titre qui sera affiché dans la barre d e titre du navigateur. Cette balise doit venir dans l'en-tête (HEAD) de votre code

V

Attributs : /

Exemple : <titre>texte dans la barre de titre</titr e>

TR Crée une nouvelle ligne dans un tableau poyr y insé rer des celulles (TD).

?

Attributs : align, bgcolor, valign

Exemple : <tr>vos celulles</tr>

U Affiche le texte en souligné. V

Attributs : /

Exemple : <u>texte souligné</u>

UL Crée une liste à puces. V

Attributs : type, start

Exemple : <ul type="cir cle">vos éléments de liste</ul>

Programmation web 1


Chapitre 3 : La conception d’un site Web

Objectifs :

� Comprendre le schéma global d’un site web

� Distinguer les différentes structures d’un site web

� Connaitre les éléments nécessaires à étudier pendant la conception

� Savoir les différents types de site


I. Introduction

II. Schéma global

1. Objectifs

2. Public visé

3. Contenu rédactionnel

4. Présentation visuelle

5. Aspect fonctionnel

III.Découpe de l'information

IV. Structure

1. Structure séquentielle

2. Structure hiérarchisée

3. Structure en réseau

4. Structure en évolution (équilibrée)

V. Les outils de navigation

VI. Page d’accueil

VII. Résolution d'écran

VIII. Zone de sécurité

IX. Mise en page

1. Le point de vue du classique

Programmation web 1


2. Le point de vue du "délire"

3. Frames ou tableaux

4. Typographie

X. Les différents types de site

1. Moteur de recherche/ Métamoteur

2. Annuaire web

3. Site marchand (e-commerce)

4. Site éducatif

5. Site publicitaire

IX. Conclusion

Programmation web 1


Chapitre 3 : La conception d’un site Web

I. Introduction

Avant de se lancer dans une publication Web, il est difficile d'éviter la comparaison avec la publication

papier.

La publication sur Internet comporte ses propres spécificités.

• L'internaute n'a pas la sensation physique du livre. Il faut structurer l'exposé et offrir des outils de

navigation pour lui permettre de se mouvoir ou même de le guider dans le site.

• L'auteur devra communiquer en terme d'écran et non plus en terme de feuille de papier.

• En Html, le langage informatique utilisé pour écrire les publications Web, vous n'avez pas la maîtrise de

votre document comme dans une feuille de traitement de texte qui sort de votre imprimante.

• L'internaute a une démarche active vers l'information qu'il recherche. L’internaute moyen lira vos pages

en diagonales, dans un ordre dispersé, qui sera tout sauf celui souhaité par l'auteur, jusqu'à l'information

recherchée. Une fois "son" information trouvée, votre site sera alors génial.

• La publication Web offre un rapport "prix / audience / délai" défiant toute concurrence vis à vis de

l’édition traditionnelle. La barre des 100 000 lecteurs est quelque chose d'accessible sur le Web, même pour un

site personnel. Le délai des corrections, actualisations et autres mises à jour sera celui de votre propre créativité.

Par contre, la publication Web est exigeante en travail et donc en temps à y consacrer.

• La différence essentielle est cependant l'interactivité qu'apporte la publication Web. Prenons

simplement les e-mails de vos visiteurs, qui vous communiquent en temps réel, encouragements, critiques ou

suggestions. Ce qui est incomparable avec vos mises à jour ou les développements ultérieurs de votre œuvre.

II. Schéma global

Avant de se lancer dans la réalisation d'un site Web, il faut prendre le temps d'une réflexion préalable dont

le schéma global est le suivant :

Figure 1 : Schéma global

Objectifs

Public visé

Contenu Visuel Fonctionnel

Programmation web 1


Le pourquoi de votre démarche (objectifs) engendrera le public que vous visez. La connaissance

de votre public déterminera alors trois composantes : le contenu rédactionnel et la présentation visuelle

de votre publication qui devront, l'un et l'autre, tenir compte des particularités de fonctionnement de ce

nouvel outil de communication qu'est Internet.

1. Objectifs

La première étape dans la conception d'un site Web est la définition des objectifs que vous

poursuivez dans la création d'un site. Ces objectifs formeront la "colonne vertébrale" de votre

communication qui apportera la cohérence indispensable à votre site.

Ces objectifs peuvent prendre des formes multiples :

� être présent sur le Web. Objectif minimaliste, il faudra dans ce cas veiller à la densité du contenu.

� faire des visiteurs ou du trafic. Ici le visuel risque d'être prépondérant mais n'espérez pas forcément une

clientèle fidélisée.

� faire un site de liens. Le fonctionnel vous invitera à vérifier régulièrement la validité de ces mêmes

liens.

� faire un site de promotion d'une association ou d'une marque commerciale. Un mariage harmonieux du

contenu et du visuel sera votre priorité absolue et fera alors votre succès.

� faire un site commercial. Remplacez dans ce qui suit les mots "contenu pertinent" par "service probant".

� faire un site académique. Il faudra penser à alléger le poids du contenu par un visuel adapté et une

facilité de navigation quasi intuitive.

� informer ou distraire. En deux mots, faire un site d’information (news).

� etc.

2. Public visé

Outre la densité du contenu et la sophistication du visuel, cette connaissance du public influencera

également la structure ou l'aspect fonctionnel de votre site. Les internautes novices souhaitent une

structure claire voire dirigiste tandis que les internautes expérimentés ont plutôt horreur d'une structure

trop lourde qui leur donne l'impression d'être chapeauté et de freiner leur accès à l'information.

Les internautes novices et visiteurs occasionnels. Ces internautes novices sont demandeurs d'une

structure claire et d'un aperçu qui illustre comment l'information est arrangée dans le site.

Les internautes experts et visiteurs fidèles. Ces internautes expérimentés utiliseront votre site pour

obtenir rapidement une information précise et pertinente. Ils ont généralement un but spécifique en tête

et ils apprécieront les menus textuels détaillés, les outils de navigation clairs à la symbolique légère

qui permettent ne recherche rapide jusqu’à l'information souhaitée.

Programmation web 1


3. Contenu rédactionnel

Le Web est une formidable source d'informations. Mais à la différence de la télévision par

exemple, l'internaute doit adopter une démarche active car il doit aller chercher cette information.

Dans cette recherche, il s'attend à trouver de l'information utile et un contenu pertinent et actualisé.

Le Web est un marché très concurrencé et que la plupart des sujets d’informations sont ou seront traités à

de multiples reprises. La différence se fera sur la qualité et le détail du contenu. Le contenu est le meilleur

moyen pour fidéliser votre public.

Il faut donc préciser d’entrée les limites de votre site.

4. Présentation visuelle

Le Web a véritablement décollé grâce à son côté visuel. Par visuel, nous voyons non seulement les

images et autres éléments graphiques mais également les animations que permettent les

développements technologiques récents comme le Java, le Javascript et le Dhtml.

Dans les 30 secondes qui vous sont accordées pour convaincre un internaute à entrer dans votre

site, le visuel prend toute son importance. Un aperçu du contenu éveillera assurément son intérêt mais

c'est le visuel qui entraînera le clic "gagnant" vers l'intérieur de votre site.

L'important est bien que le visuel soit adapté à votre public et qu'un visuel sobre, net et attrayant

suffit dans la plupart des cas. On veillera à créer tout au long des pages d'un site une identité et/ou une

cohérence visuelle qui guidera l'internaute tout au long de sa visite.

Cet aspect visuel doit impérativement tenir compte de l'aspect fonctionnel de la publication sur

Internet et tout spécialement du temps de chargement des images et du temps de réponse des

animations.

5. Aspect fonctionnel

Si dans la publication papier, il suffit de tourner la feuille, sur le Web il faudra prendre en compte

le temps de chargement de la page.

Les différentes (petites) pages doivent être structurées de façon logique afin que l'internaute puisse

naviguer efficacement dans votre site.

L'essence du Web est la notion d'interactivité. Interactivité entre les pages de votre site,

interactivité entre votre site et les autres sites présents sur le Web, interactivité entre le Web et les

autres outils disponibles sur Internet (qu'il s'agisse des moteurs de recherche, des e-mails, des listes de

diffusion, des forums, des fichiers à télécharger, etc.).

Programmation web 1


III. Découpe de l'information

Le découpage de l'information en petits morceaux, organisés de façon uniforme est

particulièrement adapté aux présentations Web car :

• Peu d'utilisateurs passeront leur temps à lire de longs passages de texte sur l'écran.

• Le découpage de l'information en petites unités et le système hypertexte font bon ménage. En

effet, en cliquant sur un lien, l’internaute s'attend généralement à trouver un autre morceau

d'information liée et complémentaire à la précédente et non un livre complet.

• Une forme uniformisée du découpage et de la présentation crée une identité à votre site. Cette

cohérence permettra très vite à vos visiteurs d'acquérir une certaines expérience pour leurs recherches.

Ce concept de découpage de l'information doit cependant être flexible et adapté au sujet traité ainsi

qu’à la logique d'organisation de votre site et au confort de votre visiteur. C'est la nature du contenu

qui suggérera le meilleur moyen de subdiviser et d'organiser l'information. Ainsi, dans certains cas,

des pages plus longues seront néanmoins nécessaires pour traiter complètement un sujet sans distraire

le visiteur par une découpe intempestive de celui-ci. C'est particulièrement vrai lorsque l'on souhaite

que l'utilisateur puisse imprimer ou enregistrer un sujet déterminé en une seule étape.

IV. Structure

La structure d’un site web à concevoir doit être bien choisie en se référant à plusieurs contraintes

telles que la facilité avec laquelle les utilisateurs trouveront ce qu’ils recherchent. Savoir structurer

l'information qu'on présente est la base fondamentale d'une expérience réussie sur le Web.

Le but est donc de fournir à l'usager l'information qu'il souhaite en un minimum d'étapes et donc

un minimum de temps. Pour autant que des normes strictes existent en la matière, on parle de la "règle

des 3 clics" selon laquelle toute information de votre site doit être disponible en maximum 3 clics de

souris. Il faut donc hiérarchiser l'information selon une structure efficiente pour minimiser la

navigation vers l'information.

1. Structure séquentielle

Le moyen le plus simple d'organiser l'information est la façon séquentielle C'est en quelque sorte

le retour au livre avec sa narration linéaire : chapitre 1, chapitre 2, chapitre 3...

Figure 2 : Structure séquentielle

Programmation web 1


La structure séquentielle est aussi particulièrement adaptée aux sites dont les thèmes progressant

du général au particulier et aux sites d'apprentissage ou tutoriaux où le passage à une page suivante

requiert des pré-requis exposés à la page précédente.

Cependant, cette structure séquentielle ne sera utilisée que pour des petits sites.

2. Structure hiérarchisée

La structure hiérarchisée est une des meilleures façons d'organiser des blocs d'information

complexes. Les différents thèmes dépendent ainsi d'une seule et unique page soit la page d'index ou

page d'accueil [home page].

Figure 3 : Structure hiérarchisée

3. Structure en réseau

Ces mini Webs fonctionnent bien pour des petits sites destinés à des utilisateurs hautement

qualifiés en quête d’enrichissement ou de perfectionnement plutôt qu'à la compréhension basique d'un

sujet. Chaque visiteur parcourra votre site de façon unique selon ses propres intérêts et sa propre

démarche vers l’information sans avoir l’impression d’être dirigé.

Ce type de structure exploite la pleine puissance des liens vers des informations à l’intérieur du

site et vers des informations située dans d’autres sites de la toile.

Figure 4: Structure en réseau

Cette structure en réseau se révèle peu pratique surtout pour les internautes novices dans le sujet

traité. Ceux-ci auront alors l’idée d’un site confus, difficilement exploitable.

Programmation web 1


4. Structure en évolution (équilibrée)

Pour les sites qui connaissent une croissance rapide et de nombreux développements, l'objectif

sera de garder un équilibre entre les différents blocs d'informations.

L'objectif sera de maintenir une hiérarchisation équilibrée qui aidera l'accès rapide à l'information et une

compréhension intuitive de la façon dont les éléments sont organisés.

Figure 5: structure équilibrée

V. Les outils de navigation

Votre structure en place, il faut encore fournir à vos visiteurs, les outils de navigation

indispensables pour une exploration aisée de votre site.

Ces outils de navigation se présentent par des liens sous forme de texte ou seront plus

agréablement conçus sous forme de petites images, boutons, icônes ou barres d’information. Ces outils

de navigation qui se retrouvent de pages en pages contribuent aussi à créer l’identité graphique de site.

Quelques principes généralement adoptés par tous les concepteurs de site semblent se dégager.

Les utilisateurs d’un site doivent toujours être capables de revenir à tout moment vers la page

d’accueil [Home ou Index] ou vers les principaux points de navigation. Chaque page d’un site

comporte donc un lien vers cette page d’accueil ou la page servant de dispatching. De plus, si le sens

du contenu global y invite, on prévoira des possibilités de retour à la page précédente ou d’avancement

à la page suivante.

Figure 6: Outils de navigation

Programmation web 1


La tendance actuelle sur le Web est de proposer plusieurs outils de navigation. Le premier sera

celui qui vous guidera l’utilisateur dans la navigation du site selon les directives de l'auteur. Les autres

donnent pleine liberté d’exploration au visiteur.

VI. Page d’accueil

Cette page d'entrée de votre site prend le nom de page d'index (en référence à l'adresse index.htm),

de "homepage" ou de page d'accueil. Pour les sites à structure hiérarchisée, cette page est tout

naturellement celle qui est au sommet de la hiérarchie et vers laquelle on pourra revenir à partir de

toutes les pages du site.

Les éléments constitutifs de celle-ci :

� le nom ou le titre de votre site qui en reprendra l'objet.

� un élément visuel (logo, image, icône symbolique) pour l'aspect attractif.

� un sommaire (détaillé ou synthétique) qui donnera une vue d'ensemble du contenu et amorcera les

outils de navigation.

� le nom de l'auteur et un lien vers l'adresse électronique de celui-ci.

� un court texte qui reprend le descriptif fourni aux moteurs de recherche (excellent pour le

référencement et le classement).

� la date de réalisation ou de la dernière mise à jour.

� etc.

On évitera dans la page d'accueil :

� Toute forme de publicité mensongère quant au contenu.

� des liens externes vers d'autres sites.

� de devoir utiliser les barres de défilement vertical.

� un temps de chargement prohibitif car la tentation sera grande.

� une page d'accueil avec des frames car cela en complique grandement le référencement et le

classement auprès de certains moteurs de recherche.

VII. Résolution d'écran

Les concepteurs débutants posent souvent la (mauvaise) question : "Pour quelle résolution d'écran

doit-on concevoir un site ?". C'est une mauvaise question car vous ne connaîtrez jamais la résolution

d'écran de votre visiteur. Il existe cependant certaines solutions pour rendre votre site esthétiquement

compatible avec n'importe quelle résolution d'écran.

La plupart des moniteurs peuvent afficher différentes résolutions d'écran. C'est la carte graphique

qui détermine les différentes résolutions d'écran possibles pour un ordinateur donné.

Si une page reprend principalement du texte, plus la résolution est haute, plus la ligne de texte sera

longue et donc plus la lecture de ce texte à l’écran sera fastidieuse. Lire du texte sur un écran en

Programmation web 1


1280x1024 reviendrait à lire un journal où le texte serait imprimé d’un bord à l’autre - sans colonnes -

Pas pratique du tout.

Figure 7: Résolution 800x600

Figure 8 : Résolution 640x480

Finalement (voir les remarques sur les images et le texte), on rencontre de plus en plus de sites qui

sont conçus en 600 pixels de large pour être vus en 800x600 ou plus. Le reste de la largeur étant un

arrière-plan neutre. La page reste alors toujours bien lisible quelque soit la résolution.

Figure 9: Résolution 640x480

Figure 10 : Résolution 800x600

Avec le Javascript 1.2, on peut maintenant détecter (sans pouvoir la modifier cependant) la

résolution d'écran de l’internaute et le rediriger automatiquement vers une page spécialement conçue

pour cette résolution, mais cela équivaut alors à écrire quasiment un site pour chaque résolution.

VIII. Zone de sécurité

En fonction de ces différentes résolutions d’écran possibles et des modifications qu’ils apporteront

à votre site, est né dans la pratique de la publication Web, le concept de la zone de sécurité.

C’est une zone qui, quelle que soit la résolution d’écran, le système d’exploitation ou le navigateur

utilisé, sera vue parfaitement par l’internaute.

C’est aussi la partie de la page Web qui apparaîtra en premier à l’œil de votre visiteur et dans

laquelle on regroupera le maximum d’informations littéraires ou graphiques qui l’inciteront à utiliser

le défilement vertical pour poursuivre l’exploration de la page. Pour une résolution d’écran toujours

possible de 640x480, la largeur est d’environ 600 pixels car il faut tenir compte des marges et de la

Programmation web 1


barre de défilement. La hauteur, compte tenu des différentes barres d’outils et barres d’état du

navigateur, sera quant à elle d’environ 350 pixels.

Figure 11 : Zone de sécurité du navigateur

IX. Mise en page

Comment allez-vous présenter votre information sur ce médium particulier qu’est l’écran de votre

visiteur ? D’une façon classique, quasiment livresque ou, profitant des dernières technologies en

matière de publication sur le Web, puiserez-vous votre inspiration dans les créations audiovisuelles

comme la télévision et spécialement ses bandes annonces ou ses spots publicitaires ?

1. Le point de vue du classique

La transmission d’un savoir se fait d’une façon structurée et claire. Titres, chapitres, sous-

chapitres, éventuellement en-tête et pieds de page apportent une hiérarchie du contenu qui permettra

tout au long de l’exposé d’aller du principal au particulier. Clarté et netteté de la mise en page restent et

resteront le maître mot de votre expression.

Les animations et autres effets visuels ou dynamiques ne font que distraire le lecteur du véritable contenu.

La véritable dynamique du Web ne réside pas dans ces animations mais dans la démarche active de l’internaute

vers l’information qu’il souhaite trouver.

2. Le point de vue du "délire"

Avec les derniers développements du Javascript, du Dhtml voire de Flash, la mise en page des

sites Web sera plus dynamique. Les diverses animations sur le texte ou les images, viennent renforcer

la transmission de l'information. Le livre n'est pas le seul moyen de communication. Il y a aussi

l'audiovisuel et les présentations multimédia. Le langage Html et ses développements annexes

possèdent maintenant tous les outils pour mettre en place son propre mode d'expression, créatif et

dynamique.

3. Frames ou tableaux

600 pixels 350 pixels

Programmation web 1


Les frames [cadres] permettent de diviser l'écran en 2 ou plusieurs fenêtres et d'afficher dans

chacune de celle-ci des documents Html distincts. Ce système offre une alternative puissante pour la

conception visuelle et l'organisation de la navigation d'une publication Web.

Les avantages des frames :

• Simplicité du code.

• Menu toujours présent à l'écran.

• Riches possibilités en JavaScript.

Les inconvénients des frames :

• Référencement délicat sur certains moteurs de recherche (Hotbot).

• Barre de défilement pas très esthétique.

• Manipulations plus difficiles pour les débutants.

Les tableaux sont aussi bien repris par les différents éditeurs du marché.

Les avantages de tableaux :

• Présentation excellente.

• Compatible avec tous navigateurs.

Les inconvénients des tableaux :

• Code entier à répéter pour chaque page à créer.

• Lourdeur du code à télécharger avec certains navigateurs.

4. Typographie

En langage Html, on peut utiliser n’importe quelle police de caractère mais à la condition que

celle-ci soit installée sur l’ordinateur de votre visiteur. Ainsi, si vous écrivez tout votre site avec la

police Amelia et si cette police n’est pas installée sur le poste de votre visiteur, celui-ci verra votre site

dans la police par défaut de son navigateur soit généralement en Times New Roman.

La solution la plus utilisée à ce jour consiste à mettre certains mots comme les titres dans une

police différente et de les capturer sous forme d’image.

Une solution consiste à employer les polices par défaut du système d’exploitation, polices que tout

utilisateur est sensé avoir sur sa machine.

X. Les différents types de site

1. Moteur de recherche/ Métamoteur

Un moteur de recherche est une base de données constituée de sites accessibles par recherche par

mots clés. Les moteurs de recherches gratuits les plus connus sont : Google, Voilà, Altavista …

Programmation web 1


Un métamoteur ou un métachercheur est un logiciel qui puise ses informations à travers plusieurs

moteurs de recherche. De manière plus précise, le métamoteur envoie ses requêtes à plusieurs moteurs

de recherche, et retourne les résultats de chacun d’eux, puis : Il élimine les résultats similaire (si

Google ou Yahoo renvoient sur les deux mêmes liens, le métamoteur ne va l’afficher qu’une fois dans

la liste des résultats).Puis, il trie ces résultats.

2. Annuaire web

Un annuaire web, répertoire web, annuaire Internet ou répertoire Internet est un site Web

proposant une liste classée de sites web. Le classement se fait typiquement dans une arborescence de

catégories, censée couvrir tout ou partie des centres d’intérêt des visiteurs. Chaque catégorie contient :

• Des Sous catégories concernant des aspects plus pointus d’un sujet donné ;

• Des hyperliens vers les sites agrémentés d’une description.

Les annuaires peuvent être généralistes, spécialisés (thématiques) ou géographiques :

• Les généralistes n’excluent, a priori, aucun centre d’intérêt ;

• Les annuaires spécialisés et thématiques se penchent exclusivement sur les sites ou les

pages web traitant d’un certain sujet, ou destinés à un certain public ;

• Les annuaires géographiques peuvent à la fois se révéler généralistes ou spécialisés ; dans

les deux cas, ils sont relatifs à un pays, une région, une localité.

3. Site marchand (e-commerce)

Il consiste en un site catalogue avec une ou des solutions de commande et de paiement en ligne :

paiement bancaire sécurisé, paypal, chèque, virement.

C’est donc la vente en ligne qui désigne l’échange des biens et services entre deux entités sur

Internet : c’est ce qu’on appelle le commerce électronique.

4. Site éducatif

Un site éducatif ou un site e-learning c’est u site qui présente des modules d’information ou de

formation, des tutoriels ou des animations de formation accessibles à distance. L’interactivité avec

l’apprenant est plus ou moins développée. Exemple : l’Espace Numérique d’Apprentissage (ENA).

5. Site publicitaire

C’est un site d’information qui présente une entreprise, un produit, une gamme de produit, une

promotion spéciale ou autre.

Le webmaster d'un site d'information/présentation doit parvenir à attirer le plus grand nombre de

visiteurs et à les convertir en visiteurs réguliers avec:

Programmation web 1


� Contenu de qualité

� Site vivant mis à jour régulièrement

� Un mot-clé permettant aux moteurs de recherche et aux internautes de savoir de quoi parle le

site

� Une navigation simple et un site facile à utiliser

� Avec toujours le souci de privilégier l'intérêt des visiteurs

Le webmaster d'un site d'information/présentation a la possibilité de gagner de l'argent sur Internet

sans vendre directement un produit. Il peut placer de la publicité, faire un partenariat avec un

marchand, et faire payer l'accès au site ou à une partie du contenu.

La qualité et la quantité du contenu font la différence.

XI. Conclusion

Tout au long de ce chapitre on a mis l’accent sur toutes les approches et les étapes de conception

d’un site web quelque soit son schéma globale, son type, sa structure et son mise en page. Après avoir

concevoir notre site il nous reste qu’a l’héberger et le référencier. C’est ce qu’on va voir dans le

chapitre suivant.

Programmation web 1


TD N°3 : Conception d’un site web

Dans la ville de Mahdia existent plusieurs établissements d’enseignement supérieur. Dans le but

de faire connaître l’offre de formation de ces établissements, le Ministère d’Enseignement Superieur,

de la Recherche Scientifique et de la Technologie (MESRT) en collaboration avec les responsables

régionaux, propose de construire un site Web promotionnel. Ce site vise les nouveaux bacheliers, les

étudiants désirant étudier à Mahdia et toute autre personne (parents, responsables, entreprises,…).

Pour atteindre cet objectif, le "cahier des charges" suivant est formulé :

1) Le site propose tout d'abord une page d'accueil présentant les différentes fonctionnalités du

site :

- le mot d'accueil au visiteur et la présentation globale de la ville

- la liste des différents établissements d’enseignement supérieur (faculté, institut et école

supérieur, restaurant universitaires, foyers publics et privés, bureaux d’accueil, centres culturels et

sportifs universitaires…).

- quelques indicateurs sur l’enseignement supérieur à Mahdia (nombre d’étudiants,

d’enseignants, offre de formation, restauration et hébergement…)

- le plan d’accès de la ville …

2) Le mot d'accueil et la présentation globale consisteront en un document Web à définir (y

mettre du texte et des images au moins....).

3) La liste des différents établissements et pour chacun on présente une page Web (fiche)

donnant les informations sur l’établissement choisi (clic sur l'item) illustré par des photos ou autres

medias.

4) Le plan de la ville fera apparaître les différents établissements sous forme de zones

cliquables. Un clic sur un monument devra faire apparaître la même fiche que celle décrite au

paragraphe précédent.

Il y a donc deux manières d'accéder aux informations concernant un établissement : par choix

dans une liste ou par choix sur la carte de la ville.

5) On n'oubliera pas de mettre dans les diverses pages Web des dispositifs de navigation

permettant de passer d'une partie du site à l'autre.

Le travail demandé consiste à appliquer la démarche de conception d’un site web (vu en cours) sur

l’étude de cas présentée ci-dessus. Pour ce faire, on vous demande de :

1. définir les objectifs d’un tel site :

- pourquoi un site web et non pas un autre produit (cdrom, film, dépliants…)?

Programmation web 1


- le but général du site

- qui est le public cible ? (on offre quoi pour chaque catégorie)

2. proposer une architecture (assez détaillée) du site.

3. présenter une maquette de la page d’accueil. En expliquant les règles de l’art à respecter dans la

réalisation de la page d’accueil d’un site web.

4. présenter une maquette type d’une page d’un établissement.

5. proposer une charte graphique pour le site avec justificatif du votre choix. (Décrire brièvement

le design du site : couleur d’arrière plan, taille, police, couleur, alignement… des paragraphes, des

titres,… et tout autre point de style du site.)

Une fois le site est réalisé, on doit passer à l’étape d’hébergement.

6. Expliquer aux responsables de MERST (non connaisseurs du web), d’une manière simple et

brève, en quoi consiste l’hébergement. Proposer un nom du domaine (significatif) pour le site.

Une fois hébergé, le site doit être référencé.

7. Expliquer aux responsables du MERST, d’une manière simple et brève, en quoi consiste le

référencement d’un site web. Pourquoi cette étape est assez importante ?

8. Pour bien référencer un site, il faudra définir un certain nombre de mots-clés. Que proposez-

vous. Quelle(s) balise(s) XHTML utiliser ?

8. Expliquer comment se fait la mise à jour (à distance) du site. (Quel protocole ? quel outil?

Comment faire ? ...)

Programmation web 1


Éléments de correction TD N°3

1 - les objectifs du site :

-avantages d’un site web :

• visible et accessible par le monde entier

• réduire sensiblement les coûts publicitaires tout en augmentant sa diffusion

• Les modifications se font en temps réel, en direct sur le site.

• Il permet de gagner du temps et d'être disponible pour tous les internautes 24h/24

• ….

- le but général du site

• Faire la présentation globale de la ville

• Faire le point sur tous les monuments de la ville

• Faciliter la collection des informations (mappe, image,…)

• …

- public ciblé : les touristes ou même des simples internautes

2 - architecture du site : parler d’un mélange entre la structure évolution et en réseau

3 - maquette de la page d’accueil: menu de navigation, mappe, présentation générale de la ville,

spécifier les couleurs utilisés, (voir aussi cours)

4 - maquette type d’une page d’un monument : photos et description du monument, spécifier

les moyens de transport, liens vers la page d’accueil et vers d’autre pages,…

5 - charte graphique pour le site:

-Elle doit répondre à trois fonctions : lisibilité (pour une bonne lecture), hiérarchie de

l’information (pour une bonne compréhension), unité de la mise en page (pour une

bonne mémorisation).

-Les barres de navigation, simples et claires, sont toujours au même endroit

-Espaces cliquables et non cliquables

-Chemin d’accès visible

-Présentation du texte : court, structuré avec des titres et des sous titres

-Caractéristiques photo (taille, dimension,…)

-Typographie

-couleur du fond de la page et du texte

-La résolution d'écran :

6 - l’hébergement : définition (voir cours)

Programmation web 1


Nom du domaine doit contenir au moins le mot Mahdia ou le mot monument

7- référencement d’un site web : définition et explication (voir cours)

8 – balise ‘meta’ :

<META NAME=" Keywords" CONTENT=" mahdia, monument, touriste ">

9 – autres techniques le référencement : voir cours

Programmation web 1


Chapitre 4 : Hébergement et référencement d’un site web

Objectifs :

� Définir l’hébergement, l’indexation et le positionnement.

� Définir le référencement

� Connaitre les différentes étapes de référencement d’un site web


I. Introduction

II. Définitions

III. Hébergement d’un site web

IV. Les étapes de référencement

V. Conclusion

Programmation web 1


Chapitre 4 : Hébergement et référencement

I. Introduction

Afin de rendre les pages d’un site web accessible par tous le monde 24H/24, il faut les héberger

(stocker) sur un serveur relié en permanence à Internet, généralement auprès de sociétés de service

spécialisées.

Ensuite, il faut penser à le référencer auprès des outils de recherche, plus particulièrement des

moteurs et des annuaires de recherche.

II. Définitions

L'hébergement peut se définir comme la prestation d'un service visant à rendre un site Web

accessible sur Internet.

Moteur de recherche : Le moteur de recherche est une base de données constituée de sites

accessibles par recherche par mots clés. Les moteurs de recherches gratuits les plus connus sont :

Google, Voilà, Altavista…

Annuaire de recherche : l’annuaire de recherche organise sa base de données en catégories et

sous-catégories pour trouver un site. Les annuaires gratuits les plus célèbres sont : Yahoo!France,

Dmoz.fr, MSN Search…

Indexation (en anglais submission) consistant à faire connaître le site auprès des outils de

recherche grâce aux formulaires que ceux-ci proposent ;

Positionnement (en anglais positionning) consistant à positionner le site ou certaines pages du site

en première page de résultat pour certains mots-clés ;

Classement (en anglais ranking) dont le but est similaire au positionnement mais pour des

expressions plus élaborées ; une partie du travail étant d'identifier ces requêtes.

Référencement : le référencement est l'ensemble des techniques qui permettent d'inscrire un site

dans les moteurs de recherche ou dans les annuaires. Le référencement est souvent associé avec le

positionnement qui, quant à lui, représente l'art d'améliorer la place du site dans les réponses fournies

par les moteurs de recherche.

III. Hébergement d’un site web

Techniquement il est possible d'héberger un site web soi-même à condition de posséder un débit

en sens montant suffisamment important. En effet sur un site Internet les visiteurs font essentiellement

du téléchargement en sens descendant (download), ce qui signifie que le serveur fait surtout de l'envoi

de pages web (upload).

Programmation web 1


Pour autant, afin de rendre un service de qualité aux visiteurs, il est conseillé de recourir aux

services d'un hébergeur, c'est-à-dire une société proposant l'hébergement (en anglais hosting) du site

web sur des serveurs spécialisés connectés en permanence à internet à très haut débit.

On distingue généralement les types d'hébergement suivants :

1. Hébergement professionnel

� hébergement mutualisé (en anglais mutualized hosting) : il s'agit d'une offre d'hébergement

où le serveur héberge un grand nombre de sites ;

� hébergement dédié (en anglais dedicated hosting) : il s'agit de la location complète d'un

serveur ;

� colocation (en anglais housing) : cette formule consiste à louer un ensemble d'hébergement

pouvant accueillir les serveurs du client.

2. Hébergement gratuit

Les fournisseurs d'accès à internet proposent généralement dans leur offre une formule

d'hébergement de site web avec un espace de stockage assez limité. Il existe ainsi un grand nombre de

sites offrant de tels services gratuits, mais il est essentiel de regarder en détails les conditions dans

lesquelles le service est rendu.

IV. Les étapes de référencement

Pour faire connaître un site Internet il faut suivre les étapes suivantes :

1. Optimisation des pages :

Pour qu'un référencement soit efficace, il est important d’optimiser les pages du site Internet avant

de commencer à le référencer :

� Optimisation des mots clés dans le texte : pour qu’un site soit trouvé par les annuaires et

par les moteurs de recherches, il faut que le contenu du site soit d'une part cohérent, et

d'autre part qu'il contienne des mots clés. Il faut retrouver sur les pages les mots clés de

façon récurrente. Il faut donc optimiser la densité de ces mots.

� Optimisation par les Meta Tag : les différents Meta Tag permettent aux outils de recherche

de connaître les mots clés du site, la description du site et le titre du site ou des pages.

� Optimisation du code HTML "Alt" : le "alt" sur une image a son importance dans le

référencement, car il est détecté par certain moteurs de recherche. Dans cette balise, il faut

toujours décrire les images en privilégiant l’utilisation des mots clés.

2. Optimisation des pages par les liens partenaires :

Programmation web 1


Les liens partenaires permettent de générer la popularité d’un site. Chez Google, on appelle

l’indice de popularité d’une page web le « Page Rank ». Ainsi, pour augmenter le Page Rank d’une

page web afin d’avoir la meilleure position possible lors des recherches sur les moteurs de recherches,

il faut :

� obtenir un maximum de liens pointant vers la page,

� choisir en priorité des pages ayant un bon Page Rank,

� choisir des pages ayant le moins de liens sortants possible,

� vérifier que la page qui fait le lien est bien indexée par Google, sinon son Page Rank vaut

zéro,

� que la page affichant un lien vers le site traite du même sujet pour que le lien soit plus

efficace,

� optimiser les liens à l’intérieur du site.

Pour obtenir ces liens, plusieurs techniques existent :

� il faut avoir un site ayant un réel contenu pour que d'autres webmasters s’y intéressent et

proposent un lien;

� il faut proposer des échanges de liens à d'autres webmasters, sans oublier de cibler les sites

traitant du même sujet que nous, si possible des sites de référence ayant un bon Page Rank ;

� il faut s'inscrire dans un grand nombre d'annuaires.

1. Inscription auprès des outils de recherches :

Après l’optimisation des pages du site Internet, il faut inscrire le site dans les moteurs et les

annuaires de recherche de sites francophone et plus particulièrement dans les moteurs de recherche qui

possèdent la plus grosse part de marché ainsi que les plus gros annuaires de recherches sans oublier les

annuaires spécialisés. Exemple :

• Utilisation de Google SiteMap :

Il s'agit d'un moyen de décrire la liste des pages du site web qui doivent être indexées par Google.

Le but est de faciliter la tâche aux robots d'indexation de Google afin qu'ils indexent plus rapidement

et efficacement les pages d’un site web. Google SiteMaps est une initiative de Google pour essayer

d'améliorer la façon dont les moteurs de recherche indexent les pages web. Cet outil est gratuit. Les

webmasters qui y participent en plaçant un fichier SiteMap sur leur site permettent à Google de

connaître plus facilement les nouvelles pages à indexer, ainsi que la fréquence d'indexation optimale

pour les pages déjà dans l'index.

Pour participer, il suffit de :

� générer un fichier Sitemap au format spécifié par Google ;

Programmation web 1


� mettre à jour ce fichier quand cela est nécessaire c’est-à-dire à chaque ajout ou

modification de pages.

• Utilisation de Froogle renommé en Google Product Search :

Froogle ou nouvellement Google Product Search est le moteur de recherche de comparaison de

prix de Google. Cet outil est un annuaire de tous les produits en vente sur Internet. Il affiche des

petites images et les prix, ainsi que les liens vers les magasins

• Participation à des forums et des listes de discussions :

La participation à des forums et des listes de discussions permet d’insérer adroitement des liens

vers un site web.

V. Conclusion

En conclusion, Tout au long de ce chapitre on a mis l’accent sur les différents concepts

d’hébergement et de référencement d’un site web. Les étapes de référencement sont aussi détaillées

afin d'améliorer la place du site dans les réponses fournies par les moteurs de recherche. Ce concept de

référencement est fortement lié au concept de positionnement.

Programmation web 1


Bibliographique/ Webographie

[1] http://discipline.free.fr/actu.htm

[2] www.wikipédia.com

[3] Architecture d’un site web - www.lehtml.com, Van Lancker Luc, copyright 2002,

[email protected].

[4] http://www.awt.be/contenu/tel/ebu/ebu,fr,fic,090,000.pdf, © Agence Wallonne des

Télécommunications (AWT).

Documents

Support de cours - WordPress.com · Chapitre 2 : Le développement Web I. Introduction Ce chapitre est conçu pour étudier le principe de fonctionnement du web et définir les différents