Programmation Web 1 - Support de Cours

II Le corps du document body ......................................................................................... 21

II.1 Mise en forme......................................................................................................................... 21

II.2 Les images.............................................................................................................................. 23

II.3 Les liens hypertextes .............................................................................................................. 23

II.4 Les listes................................................................................................................................. 25

Conclusion ............................................................................................................................ 29

Chapitre III Les notions avanc es du HTML ...................................................................................31

Introduction.......................................................................................................................... 31

I Les tableaux ....................................................................................................................... 31

I.1 quoi servent-ils ?.................................................................................................................. 31

I.2 Du tableau simple au tableau complexe .................................................................................. 31

I.3 L'utilit des tableaux aujourd'hui............................................................................................. 35

II Les formulaires ................................................................................................................ 35

II.1 quoi servent-ils ? ................................................................................................................ 35

II.2 La balise form......................................................................................................................... 35

II.3 Les champs texte mono lignes ............................................................................................... 36

II.4 Les boutons radio ................................................................................................................... 38

II.5 Les cases cocher .................................................................................................................. 38

II.6 Les boutons ............................................................................................................................ 39

II.7 Les listes d roulantes ............................................................................................................. 40

III Le XHTML ..................................................................................................................... 41

III.1 D finition ............................................................................................................................ 41

III.2 Validation W3C.................................................................................................................. 41

III.3 Syntaxe................................................................................................................................. 42

Conclusion ............................................................................................................................ 44

Chapitre IV : Les feuilles de style.......................................................................................................46

Introduction.......................................................................................................................... 46

I Utilit et avantages ............................................................................................................ 46

II D finition .......................................................................................................................... 47

II.1 CSS Globale ........................................................................................................................... 48

II.2 CSS Intra-lignes ..................................................................................................................... 48

II.3 CSS import e.......................................................................................................................... 49

III Les classes et les ID ........................................................................................................ 49

III.1 Notion de classes................................................................................................................... 49

III.2 Notion des ID........................................................................................................................ 50

IV Les pseudo- l ments et les pseudo-classes .................................................................... 51

IV.1 Les pseudo-classes................................................................................................................ 51

IV.2 Les pseudo- l ments............................................................................................................. 53

V Les balises structurales.................................................................................................... 54

VI Le flux.............................................................................................................................. 54

VII Le positionnement......................................................................................................... 55

VII.1 G n ralit s........................................................................................................................... 55

VII.2 Attributs............................................................................................................................... 57

Conclusion ............................................................................................................................ 59

Bibliographie ........................................................................................................................................60

Webographie ........................................................................................................................................60

CCHHAAPPIITTRREE

II

G n ralit s

et notions de base

PPrr --rreeqquuiiss

F Aucun.

OObbjjeeccttiiffss gg nn rraauuxx

I.

II.

III.

IV.

V.

Introduction

I. Historique

Les services d'Internet

principaux formats de fichiers

Conclusion

F Introduire la notion dInternet ainsi que ses services.

F Pr senter les tapes et les techniques de cr ation dun site web.

PPllaann ::

Introduction.

I. Historique.

II. Les services d'Internet.

III. Principaux formats de fichiers.

IV. Cr ation dun site web

V. Le r f rencement et la gestion

Conclusion.

Programmation web 1

Chapitre I G n ralit s et notions de base

Chapitre I : G n ralit s et notions de base

Introduction

Surfer, ou naviguer, sur Internet sont devenus des expressions courantes et fr quemment

utilis es. Elles montrent bien limage de cet oc an dinformations qui s' tend aujourd'hui la

grandeur de la plan te et continue de cro tre et de se diversifier chaque jour [1].

LInternet marque un virage technologique et culturel

important en diffusant aussi

largement

l'information lectronique et en donnant acc s des grandes quantit s

dinformation pour un grand nombre de personnes travers le monde.

Il s'agit d'un r seau international d'ordinateurs qui communiquent entre eux dans une toile

dense de relations et de connexions. Les diff rents ordinateurs branch s au r seau

Internet peuvent communiquer ensemble de fa on transparente pour l'usager ind pendamment

des types d'ordinateurs utilis s (Mac, PC, Unix ou autres), mais en utilisant cependant les

logiciels appropri s et surtout les protocoles standard.

Le mot Internet (abr viation du mot anglais internetwork) d signe un r seau informatique

constitu par l'interconnexion de plusieurs r seaux. Pour cette raison, on appelle aussi

Internet le r seau des r seaux .

I Historique

Internet est

linfrastructure de communication l' chelle plan taire issue de

l'interconnexion de r seaux informatiques publiques et priv s, il a t cr e dans les ann es 70.

l'origine, lInternet relie les sites informatiques militaires des tats Unis.

I.1 Les ann es 60 : Contexte de l a guerre froide

En 1957, l'ARPA (Advanced Research Project Agency) a t cr e aux USA pour

piloter un certain nombre de projets dans le but est d'assurer la sup riorit scientifique et

technique sur les Russes. Cette organisation regroupait certains des plus brillants cerveaux

am ricains.

En 1967, Lawrence G. Roberts, r cemment arriv la t te du projet de r seau

informatique l'ARPA, publie ces Plans pour le r seau ARPANET .

Pr sentation d'une conception de r seau commutation de paquets par Donald Davies

et Robert Scantlebury

du NPL (National Physical Laboratory Royaume Uni).

Page 7

Programmation web 1

Chapitre I G n ralit s et notions de base

galement un article de Paul Barran de la RAND Corporation (militaires) au sujet de

l'utilisation d'un r seau commutation de paquet pour transmission s curis e de la voix.

I.2 Les ann es 70/80 : Arpanet et le protocole TCP/IP

En 1969,

le r seau Arpanet est op rationnel

reliant

initialement 4 instituts

universitaires. Cette liaison a permis aux quatre institutions de transf rer des donn es et

d'effectuer distance des calculs longs sur plusieurs ordinateurs.

Tout au long des ann es 70, les laboratoires de recherche sont progressivement reli s

au r seau Arpanet.

En 1970, le protocole NCP (Network Control Protocol) a t utilis sur Arpanet afin

de pouvoir mettre en liaison des machines h t rog nes (Unix, IBM,...).

En 1983, le NCP est d finitivement abandonn au profit du TCP/IP (Transfer Control

Protocol / Internet Protocol) que nous utilisons encore aujourd'hui et qui constitue le protocole

de base d'Internet. TCP est charg de segmenter le message en paquets et de r arranger ces

derniers

la

r ception, tandis quIP est charg d'assurer l'acheminement des paquets d'un

ordinateur vers un autre jusqu' la destination.

I.3 Les ann es 80/90/2000 : d'Internet au WWW, une mont e exponentielle

En 1977, Internet devient une r alit car le TCP/IP est effectivement utilis pour relier

divers r seaux Arpanet. Le nombre d'ordinateurs connect s d passe alors la centaine et

depuis, ce nombre ne cesse d'augmenter d'ann e en ann e.

Lorigine du Web remonte mars 1989 lorsque Tim Berners Lee, un informaticien au

CERN (Conseil Europ en pour la Recherche Nucl aire), propose de cr er sur le site Internet

du CERN un ensemble de documents reli s les uns aux autres par des liens hypertextes, afin

de faciliter la recherche d'informations pour les physiciens.

Le d but des ann es 1990 marque la naissance d'Internet tel que nous le connaissons

aujourd'hui : le Web, un ensemble de pages en HTML (HyperText Markup Language)

m langeant du texte, des liens et des images, accessibles l'aide d'une URL (Uniform

Ressource Locator) en utilisant le protocole HTTP (HyperText Transfert Protocol).

En 1991, Tim Berners Lee du CERN Gen ve met au point linterface dInternet

appel e World Wide Web, qui permet douvrir le r seau au grand public en simplifiant les

proc dures de consultation des sites.

Page 8

Programmation web 1

Chapitre I G n ralit s et notions de base

En 1991, 300 000 ordinateurs sont connect s, ce nombre atteint 1 000 000 en 1992.

En 1992, le premier lien (on parle de lien hypertexte) vers le site Web du CERN est

cr sur le serveur de Fermilab aux tats Unis : la toile mondiale commence se tisser. Les

ann es 1990 ont vu le Net continuer grossir une vitesse exponentielle sous

l'impulsion du Web.

En 1993, Apparition du premier navigateur web (browser) par Netscape, supportant le

texte et les images. Cette m me ann e, la NSF (National Science Foundation) cr e une

compagnie pour enregistrer les noms de domaine.

En 1993, on comptait 600 sites, ce chiffre d passe 15 000 en 1995. Le WWW devient

le service le plus important sur Internet.

En 2008, on compte 1,5 milliard dinternautes dans le monde, 1.3 milliard

dutilisateurs demail, 210 milliards demails envoy s par jour, 186,7 millions de site web,

133 millions de blogs.

Le chiffre d'affaires du commerce en ligne (e commerce), qui a d pass la barre des

20 milliards d'euros en 2008, devrait atteindre 30 milliards en 2010.

II Les services d'Internet

Internet offre plusieurs services ses usagers. Pour y avoir acc s, l'usager (l'internaute)

doit

donc disposer des logiciels clients ad quats, navigateur web, client de messagerie

lectronique, bo te pour chat, etc.

II.1 Messagerie lectronique

La messagerie lectronique (e mail ou encore mail), c'est utiliser Internet comme on

utilise les lettres dans 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.

II.2 Forum de discussion

La principale limitation du courrier lectronique est qu'il faut choisir un destinataire

pour pouvoir envoyer un mail. La solution est dans les forums de discussion.

Il s'agit d'un espace de discussion sur Internet fonctionnant, de mani re asynchrone, comme

une bo te aux lettres publique, dans laquelle chacun est libre de consulter les messages et d'y

Page 9

Programmation web 1

Chapitre I G n ralit s et notions de base

r pondre. Un forum ou newsgroup (groupe de discussion) s' tablit g n ralement autour d'un

sujet donn . Dans certains cas, une personne appel e mod rateur se charge d'animer les

d bats et d' liminer les messages non conformes la charte du forum.

II.3 Transfert de fichiers

Dans Internet, il est possible de transf rer des fichiers d'un ordinateur un autre gr ce

au protocole FTP (File Transfer Protocol). En pratique, ce protocole permet un usager

d'acc der aux disques durs mont s sur un ordinateur distant.

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.

II.4 Telnet et SSH

Ces services permettent un internaute de se connecter et donc d'utiliser distance une

machine comme sil se trouvait face elle. Ce contr le distance permet d'ex cuter des

commandes, de d marrer ou arr ter un programme, de consulter l' tat de la machine &etc.

Telnet est plus ancien, et commence a tre abandonn au profit de SSH pour des raisons

de s curit : avec Telnet toutes les informations transmises transitent en clair sur le r seau, y

compris les mots de passe, ce qui permet un ventuel pirate l' coute du r seau

d'intercepter des donn es sensibles. l'inverse, pour SSH toutes les donn es transmises sont

crypt es et donc illisibles par toute autre personne que le destinataire.

II.5 Cyber bavardage (chat)

Le cyber bavardage (chat en anglais) d signe les activit s permettant des utilisateurs

d'Internet d' changer, de mani re interactive et en temps r el, avec d'autres utilisateurs. Cette

forme de conversation s'effectue soit textuellement (chat), soit avec images vid os (webcam,

vid oconf rence) ou avec du son (audioconf rence).

II.6 Journal personnel (Blog)

Le Blog (ou WeBlog) est un journal personnel en ligne qui permet un internaute de

publier r guli rement des informations ou de commenter l'actualit sur un sujet.

Un journal de bord personnel sur internet permettant de publier facilement des actualit s (les

Articles ou Notes ou Billets ou Postes dans la langue des blogueurs) sur un sujet, de les

Page 10

Programmation web 1

Chapitre I G n ralit s et notions de base

illustrer de fa on multim dia (dessins, photos, vid os, sons&) et de partager ses id es en

recueillant des commentaires sur ses articles.

II.7 Moteur de recherche et annuaire Web

Un moteur de recherche est un logiciel permettant de retrouver des ressources (pages

web, forums, images, vid os, fichiers... etc.) associ es des mots quelconques (mots cl s).

Certains sites web offrent un moteur de recherche comme principale fonctionnalit .

Il s'agit d'un outil de recherche sur le Web constitu de Robots, (appel s encore bots, spiders,

crawlers ou agents) qui parcourent r guli rement

les sites de fa on automatique (sans

intervention humaine, ce qui les distingue des annuaires Web) pour d couvrir de nouvelles

adresses (URL). Ils suivent les liens hypertextes (qui relient les pages les unes aux autres)

rencontr s sur chaque page atteinte.

Selon une tude r alis e en ao t 2007 :

Google : environ 60% des 61 milliards de recherches sur internet,

Yahoo : 8,5 milliards de recherches, soit 14% du total,

Baidu (le Google chinois) : 3,3 milliards de requ tes, soit 5,4% du total,

Bing (rempla ant de Live search de Microsoft) : 2,1 milliards de recherches,

3,4%.

Un annuaire Web (appel

galement

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 dans une arborescence de cat gories, cens e couvrir

tout ou une partie des

centres d'int r t des visiteurs.

III Principaux formats de fichiers

Lutilisation, sur Internet, des composantes multim dia et

interactives ou dextensions

logicielles n cessite plusieurs formats et standards de fichiers. Bien que plusieurs de ces composantes

s'int grent de fa on transparente aux pages Web, les utilisateurs d'Internet rencontrent souvent des

formats de fichiers qui peuvent n cessiter l'utilisation de logiciels particuliers.

Les fichiers d'ordinateurs sont de deux types : ASCII ou binaires. Les premiers sont constitu s

de caract res qui

respectent

les codes ASCII

(American Standard Code for Information

Interchange), donc lisibles l cran facilement. Les fichiers binaires contiennent des informations

Page 11

Programmation web 1

Chapitre I G n ralit s et notions de base

cod es directement en binaire (des 0 et des 1). Pour afficher ou ex cuter un fichier binaire, il faut

utiliser un logiciel compatible avec celui qui l'a cr .

III.1 Les documents textes

HTML (HyperText Markup Language) . Utilis pour la cr ation des

pages Web.

PDF (Portable Document Format) . Format du logiciel Acrobat

dAdobe.

Tr s utilis pour la diffusion de documents sur Internet.

XML (eXtensible Markup Language) . Il sert essentiellement

stocker/transf rer des donn es structur es en champs arborescents.

TXT . Par convention, on donne cette extension aux fichiers de texte

simple non format .

III.2 Les images

GIF (Graphics Interchange Format) . Format assez compacts mais

limit un maximum de 256 couleurs. Utilis pour produire de petites images peu

textur es, des ic nes, des boutons dans les pages Web, etc. Permet la transparence et les

images anim es.

JPEG, JPG (Joint Photography Experts Group) . Tr s fr quent sur

Internet, produit des fichiers tr s compacts gr ce son algorithme de compression

efficace mais qui provoque des pertes d'information. Utilis pour produire des photos et

images textur es dans les pages Web.

PNG (Portable Network Graphics) . Appel remplacer les formats

GIF et JPEG.

TIFF, TIF (Tagged Image File Format) . Utilis pour l'archivage

d'images de qualit . Utilise un algorithme de compression sans perte. Fichiers de

grandes dimensions.

III.3 Les fichiers audio

AIFF, AIF (Audio Interchange File Format) . Relativement r pandu

dans Internet.

Page 12

Programmation web 1

Chapitre I G n ralit s et notions de base

AU (Unix Audio sound file format) . D velopp pour Unix. Tr s

r pandu dans Internet.

MID (Music Instrument Digital Interface) . Norme pour transmettre des

informations musicales entre instruments lectroniques et ordinateurs.

MP3 (Moving Pictures Expert Group)

. Format public pour

la num risation audio en haute fid lit (bonne qualit ).

RA (RealAudio) . Format propri taire tr s ancien, il permet de diffuser

de la musique sur internet en utilisant la technique du streaming.

WMA, WAV (Waveform Audio File Format) . Format utilis par

Windows pour stocker des s quences sonores non compress es (WAV) ou multim dia

assez bien compress es (WMA).

III.4 Les fichiers vid o

AVI (Audio Video Interleave movie) . Format vid o d velopp

par Microsoft.

MOV, QT (QuickTime Movie) . D velopp par Apple.Bonne

qualit d'image.

MPEG, MPG (Moving Pictures Expert Group) . Un standard de

compression vid o et audio tr s r pandu dans Internet.

DivX , capable de compresser des fichiers vid o volumineux en fichiers

plus l gers.

IV Cr ation dun site Web

IV.1 D finition

Un site Internet ou Intranet d'informations reste avant tout une vitrine, un support. C'est

pour cela quil est consid r comme un important moyen de communication et

d'identification. La mise en place d'un site doit tre tudi e de fa on approfondie et ne peut

tre abord e comme la r daction d'un document classique. Il s'agit de rendre coh rent une

masse d'information et de la mettre la disposition d'un panel h t rog ne d'utilisateurs plus.

C'est pourquoi un int r t tout particulier doit lui tre port , aussi bien au niveau du contenu

que de la pr sentation [3].

Page 13

Programmation web 1

Chapitre I G n ralit s et notions de base

Un site Internet se d compose " physiquement " en plusieurs l ments :

Un nom de domaine (une URL) accessible notamment par les moteurs de recherche

mais aussi par des sites partenaires et travers diff rentes publications papier. C'est

pourquoi, l'adresse du type http://www.notresite.com doit tre claire, courte et explicite.

Un ensemble de pages statiques et/ou dynamiques reli es entre elles par des liens. Ces

pages seront d velopp es dans une technologie d pendante de l'objectif et du contenu

du site.

Les pages seront ensuite h berg es chez un prestataire ou en interne en fonction

notamment de la technologie utilis e, du volume du site, du trafic escompt , du budget

allou .

IV.2 Objectifs et cible

Il est crucial de s'interroger sur la finalit du site car il doit r pondre un besoin et non pas

une envie.

D finir l'objectif du site (compl ment d'un outil sp cifique, sources d'informations,

portail, commerce en ligne, base de donn es...).

Quel est le public vis ? Est-ce un groupe d'amis, des personnes partageant les m mes

id es ou de futurs clients ? Il faut donc ensuite cadrer le style : les informations doivent-

elles tre pointues ou vulgaris es ?

Que sera l'environnement cible des visiteurs:

type de configuration (PC/Mac),

navigateur, outils disponibles (Pack office, d compresseur type Winzip, messagerie),

puissance des machines, performance et dur e des connexions (l'acc s Internet se fait

il par modems ou via une ligne haut d bit ?).

IV.3 Les technologies utilis es

Une bonne connaissance du langage L'HTML sav re indispensable pour cr er des

pages Web. A savoir quil existe des diteurs (WYSIWYG : What you see is what you

get), comme FrontPage, DreamWeaver, HTMLPad, Nvu&,qui nous assiste la

cr ation rapide des pages Web.

A savoir quil existe des syst mes de gestion de contenu CMS : est une famille

de logiciels destin s la conception et la mise jour dynamique de site web ou

d'application multim dia.

Page 14

Programmation web 1

Chapitre I G n ralit s et notions de base

Compte rendu : menez une recherche sur les diff rents CMS du march ainsi que leurs

fonctionnalit s.

JavaScript

/ DHTML (animation simple de texte,

interactivit r duite via des

formulaires).

Flash (animation graphique avanc e) r server aux sites en Intranet ou d di s au

graphisme.

Pages actives : il existe plusieurs technologies pour la cr ation de pages actives (c'est

dire capables de g n rer un contenu dynamique en fonction d'informations donn es

par le visiteur ou l'administrateur du site) : ASP, JSP, PHP et les CGIs avec PERL

associ es plusieurs SGBD (MYSQL, SQL Server, ACCESS, Oracle&).

IV.4 Pr sentation du site

La charte graphique et l'ergonomie d'un site sont deux points ne pas n gliger.

Obtenir la charte graphique existante et l'adapter pour une diffusion en ligne.

Cr er et structurer une charte suivant les besoins num r s.

Respecter les contraintes des services et les crit res de communication de groupe

(disposition de logo, informations l gales).

Savoir limiter le poids (en chargement) de la charte en fonction des objectifs et du

public vis .

Toute navigation doit tre intuitive quel que soit

le m dia. A ce titre, nous

respecterons les r gles d'usage d'acc s aux informations savoir : maximum 3 clics et 7

grandes

rubriques d'informations par page. Le contenu et

l'organisation des

informations du site devront donc s'y plier.

De quelle fa on peut-on rappeler les principaux l ments et sections du site ? Par une

banni re horizontale, verticale, un arbre de navigation ?

Il est appr ciable de disposer d'un plan du site afin de s'y retrouver.

Page 15

Programmation web 1

Chapitre I G n ralit s et notions de base

V Le r f rencement et la gestion

V.1 Le r f rencement

Le r f rencement est une tape importante dans la cr ation d'un site web, puisqu'il est inutile

de mettre en ligne un site fabuleux s'il n'est pas visible par le public. En effet,

le

r f rencement a pour mission de faire conna tre le site des moteurs de recherche et

dautres

Il existe deux types de r f rencement:

sites.

Le r f rencement automatique assur par des "spiders" programme qui scrute les

pages d'un site en s'appuyant sur les balises META situ es dans la balise d'en-t te de

page <HEAD> et la description des liens et des images.

Le r f rencement manuel, comme sur Yahoo, cest le fait dajouter lURL du site la

liste dURLs de ce moteur de recherche.

Il existe plusieurs fa ons de se r f rencer :

De mani re gratuite.

De mani re payante.

V.2 La gestion

Afin d'assurer la continuit du site, il est n cessaire de suivre son volution, d'enrichir

son contenu et de corriger les ventuelles erreurs, c'est la t che du webmaster.

Afin d'anticiper sur les modifications apporter et de v rifier l'audience du site, nous

aurons recours des outils statistiques. En effet, il est utile voir indispensable de quantifier et

qualifier le trafic du site. Ces outils sont soit fournis par l'h bergeur, ou bien disponibles

(m me gratuitement) sur Internet, ils nous renseignent notamment sur :

La provenance des visiteurs (pays, site r f rant, moteur de recherche).

Les pages consult es, pendant combien de temps et quelle heure.

Le nombre de visites, visiteurs et pages vues.

Page 16

Programmation web 1

Chapitre I G n ralit s et notions de base

Conclusion

L'objectif de cette premi re le on est de donner une id e globale sur Internet et les

ph nom nes qui en d rivent. Les d finitions et la description des diff rentes tapes qui

ont marqu l' volution du r seau mondial on t pr sent es au d but, ensuite on a abord

les diff rents services offerts par Internet et leurs utilisations, ainsi que les divers formats

de fichiers manipul s sur ce r seau.

Tout au long de cette le on on a num r les l ments qui tournent autour dun site

web, ainsi que les tapes suivre avant de se lancer dans limpl mentation et le codage.

Aussi on a vu les technologies quon peut utiliser afin de concevoir et de d velopper notre

site, ainsi que les l ments de gestion et de r f rencement.

Nous allons passer apprendre les outils p...