programmation web 1€¦ · c'est le langage de programmation utilisé pour créer des pages web la...

Institut Supérieur des Etudes Technologiques de Sidi Bouzid

Département Technologies de l’Informatique

Programmation Web 1Programmation Web 1

LTI 11LTI 11--1212--1313

Enseignant Enseignant : :

Mohamed MANAAMohamed MANAA

Année Universitaire 2009-2010

Programmation Web : InternetProgrammation Web : Internet

� Internet : Interconnexion Networks

� rassemble un grand nombre de machines totalement hétérogènes

� constitué de lignes louées et de routeurs

� la transmission se fait en mode paquet

Introduction :Introduction :

Mohamed MANAA Programmation Web

� la transmission se fait en mode paquet

� les utilisateurs accèdent à l'Internet via des points d'accès fournis par des

entreprises commerciales

� le chemin suivi par les données peut varier

� topologie exacte (taille, étendue) impossible à connaître avec certitude

HistoriqueHistorique

� 1969 : L'agence DARPA (Defense Advanced Research Project Agency) dépendant

du DOD (Department Of Defense), développa le réseau ARPANET (Réseau d'ARPA)

avec 4 nœuds ⇒ constituer un réseau fiable, résistant aux attaques ennemies (si l'un

des nœuds venait à être détruit)


Programmation Web

� 1972 : Début des spécifications de la pile de protocoles TCP/IP

� 1980 : Unix intègre TCP/IP

� 1983 : TCP/IP était utilisé partout sur ARPANET / Interconnexion d’Arpanet et

d’autres réseaux

� 1993 : Introduction du service World Wide Web WWW

� 1995 : TCP/IP vendu avec Windows

Mohamed MANAA

Qui gère Internet ?Qui gère Internet ?

Internet fonctionne grâce à plusieurs équipes, qui sont regroupés en deux catégories:

Le NOCNOC (Network Operation Center) qui installe, surveille, diagnostique, dépanne...

Le NICNIC (Network Information Center) qui enregistre les accès, distribue les noms et

les adresses... (un dans chaque pays)


Programmation WebMohamed MANAA

� E-mail (Electronic mail ou messagerie électronique)

� SMTP (Simple Mail Transfert Protocol) / POP (Post Office Protocole)

� FTP (File Transfert Protocol)

� Transfert de fichier

� News

� telnet (TErminaL NETwork)

Services de base de l’Internet Services de base de l’Internet


Programmation Web

� telnet (TErminaL NETwork)

� non sécurisé !

� Accéder à une machine distante

� World Wide Web (ou Web)

� Le web repose sur l’hypertexte

� Une page hypertexte est écrite en HTML

� Ces pages se trouvent sur un serveur Web

� Le protocole utilisé est le HTTP (Hyper Text Transport Protocol)

Mohamed MANAA

� Né en 1989, pour les besoins internes du CERN (Centre Européen de Recherche

Nucléaire)

� Le Web est considéré comme la vitrine de l'Internet

� Donne accès à un nombre incalculable de documents sur des thèmes très variés (≈8

Milliards de documents sur plus de 30 Millions de serveurs)

World Wide WebWorld Wide Web


Programmation Web

Milliards de documents sur plus de 30 Millions de serveurs)

� Un ensemble de serveurs proposant des documents accessibles via un protocole

appelé HTTP (HyperText Transfer Protocol)

� Les logiciels qui permettent de se connecter à des serveurs web s'appellent des

navigateurs web (ou browsers en anglais)

� Les deux navigateurs les plus connus sont ceux de Microsoft (Internet Explorer) et

de Netscape (Navigator dans la suite Communicator)

Mohamed MANAA

� C'est un mécanisme client-serveur.

� Le client demande un fichier, le serveur lui donne tel qu'il est stocké (processus

statique)

� Le serveur peut aussi générer un fichier en fonction de la demande du client

(processus dynamique)

World Wide Web : FonctionnementWorld Wide Web : Fonctionnement


Programmation Web

Programme Client

InternetProgramme

Serveur

Documents

Document(s)Machine Client

Machine Serveur

Requêtes

Document(s)

Mohamed MANAA

URL : Uniform Ressource LocatorURL : Uniform Ressource Locator

Exemple : http://www.ibm.com/products/index.html

World Wide Web : FonctionnementWorld Wide Web : Fonctionnement

protocole://adresse_serveur:numéro_de_port/chemin…/document


Programmation Web

� Le protocole est par défaut HTTP : HyperText Transfert Protocol

� L'adresse du serveur peut être indiquée sous forme d'adresse IP (Internet Protocol)

ou DNS (Domaine Name Server)

� Le numéro de port est rarement indiqué (Le port par défaut est le 80 )

� Le chemin, suivi d'un nom de fichier (ou de répertoire), indique précisément le fichier

auquel on souhaite accéder

Mohamed MANAA


� HTML (HyperText Markup Language)

� Conçu par Tim Berners-Lee au CERN en 1990

� Dérivé de SGML- Standard Generalized Markup Language :

�SGML est un langage de description de document pour échange entre systèmes

hétérogènes.

Programmation Web : HTMLProgrammation Web : HTML

Programmation Web

� Rendu populaire en 1993 par Mosaic, développé au NCSA

� Pas un traitement de texte mais un standard d'échange

� Suivi de nombreuses extensions diverses

�Novembre 1995: HTML 2.0 défini par IETF

� Janvier 1997: HTML 3.2 défini par W3C

�Décembre 1997: HTML 4.0 défini par W3C

�HTML+ (1993) et HTML 3.0 (1995) sont non standards

Mohamed MANAA


� Standardisation de HTML

� [HTML 1.0] 1990 Hypertexte + images

� [HTML+] 1993 < TABLE > , images cliquables, < FORM >

� [HTML 2.0] IETF 11/95 Mosaïc

� [HTML 3.2] W3C 1/97: tableaux, font size, color, java, javascript


Programmation Web

� [HTML 3.2] W3C 1/97: tableaux, font size, color, java, javascript

� [HTML 4.0] W3C 4/98: frames- styles sheets - améliorations tableaux ,

formulaires - HTML dynamique - offre d'alternatives: accès aux handicapés

� http://www.w3.org/MarkUp/

� L'organisme W3C (World Wide Web Consortium) chargé de la standardisation des

technologies du Web.

Mohamed MANAA

IntroductionIntroduction

� C'est le langage de programmation utilisé pour créer des pages Web

� La première version est apparue en 1989

� Constitue une norme acceptée par le W3 consortium

� Il s’agit d’une langue que tous les ordinateurs en théorie peuvent comprendre


Programmation Web

� Repose sur le protocole HTTP

� Il peut comporter des Textes, des Images, des composants Multimédia (son-

vidéo).

� Permet de créer des documents interactifs grâce à des liens hypertextes, qui

relient votre document à d'autres documents

� C'est un langage à balisage

Mohamed MANAA

IntroductionIntroduction

� Le langage HTML est capable de gérer la quasi-totalité des artifices du Web tels que:

� les liens hypertextes,

� les textes formatés,

� les images,

� les vidéos ou animations,


Programmation Web

� les tableaux,

� les formulaires,

� les cadres (frames),

� les scripts,

� les caractères spéciaux,

� les feuilles de styles

�Etc.

Mohamed MANAA

� Un éditeur de texte simple :

� Bloc-notes ou Notpad de Windows

� Un browser :

� Netscape Navigator (payant) : www.home.netscape.com

Outils nécessairesOutils nécessaires


Programmation Web

� Microsoft Explorer (gratuit) : www.microsoft.com

� Vous n’avez pas besoin

� d’être connecté pour écrire et voir vos pages HTML

� d’avoir le dernier éditeur HTML

Mohamed MANAA

Premières balisesPremières balises

Début d'un document de type HTML.

Fin d'un document de type HTML.

Début de la zone d'en-tête

(prologue au document proprement dit contenant des informations

destinées au browser).


Programmation Web

destinées au browser).

Fin de la zone d'en-tête.

Début du titre de la page.

Fin du titre de la page.

Début du document proprement dit.

Fin du document proprement dit.

Mohamed MANAA

Premier document HTMLPremier document HTML

Cours Programmation Web


Programmation Web

Ceci est notre premier document HTML

Mohamed MANAA

Les commentaires Les commentaires


Programmation Web

Mohamed MANAA

L’entête d’un documentL’entête d’un document

� Permettant de regrouper des informations indispensables pour le référencement

de la page

� Utilisé par les moteurs de recherche afin de déterminer les caractéristiques du

document en vue de l'indexation du site dans leur base de données.


Programmation Web

document en vue de l'indexation du site dans leur base de données.

�Exemple

� le titre, les mots clés, l'auteur,

� La commande marque le début de l'entête.

� La commande marque la fin de de l'entête.

...

...

...

Mohamed MANAA

Le titre d’un documentLe titre d’un document

� L'en-tête doit contenir un seul titre, clair et précis.

� Outre que le titre de la page puisse parfois être affiché dans un navigateur,

les moteurs de recherche l'utilise systématiquement dans leurs investigations.

� Il convient de choisir son titre avec soins et surtout d'éviter de l'omettre étant

donné son importance dans le référencement auprès des outils de recherche.


Programmation Web

� La commande marque le début du titre.

� La commande marque la fin de du titre.

Un titre pertinent ...

...

...

Mohamed MANAA

Les balises METALes balises META

� La balise

� cette balise sert à donner des informations précises sur le document

� elle est particulièrement utile pour faire reconnaître votre page Web par les

moteurs de recherche


Programmation Web

� exemple :

� La balise META n’a pas besoin d’être fermée

� On notera que la balise META contient des attributs (name, content, …)

Mohamed MANAA


Marqueur description

Author Nom de l'auteur

Description Un texte de description du document

Keywords Les mots clés qui caractérisent le document (chaque mot clé est


Programmation Web

séparé du suivant par une virgule)

Expires Date à partir de laquelle le navigateur doit recharger la page à

partir du serveur, et ne pas la charger à partir du cache.

Refresh Redirection vers une autre URL après un temps en seconde (ceci

peut être très utile en maintenance de site, et en particulier lors

du déplacement de fichiers)

Mohamed MANAA

TITRE PERTINENT



Programmation Web

Le corps d’un document HTMLLe corps d’un document HTML

� La balise

� c’est le corps du document HTML

� il contient tous les éléments affichés par le navigateur

� la balise vient juste après l’entête d’un document

� La balise BODY peut contenir des attributs pour définir les couleurs de la page


Programmation Web

Couleur des liens déjà visitésVlink

Couleur du lien actifAlink

Couleur des liensLink

Couleur du texteText

Image de fond de pageBackground

Couleur de fond de pageBgcolor

SignificationAttributs

Mohamed MANAA


Un titre pertinent

....


Programmation Web

...

Diverses commandes HTML

...

Mohamed MANAA


� La définition des couleur se fait soit en les appelons par leurs nom : black, white,

yellow … ou encore en donnant leur code RBV en hexadécimal précédé du caractère # :

bleu = #0000FF vert = #00FF00

blanc = #FFFFFF violet = #8000FF

rouge = #FF0000 jaune = #FFFF00


Programmation Web

gris clair = #C0C0C0 noir = #000000

� La couleur des liens

�Des attributs permettent la mise en couleur des liens dans différentes situations.

� L'attribut LINK="Couleur" donne une couleur pour un lien non-activé.

� L'attribut ALINK="Couleur" donne une couleur pour un lien actif.

� L'attribut VLINK="Couleur" donne une couleur pour un lien déjà activé.

Mohamed MANAA


Un titre pertinent


Programmation Web

...

...


...

Mohamed MANAA

� Les marges

� attributs propres à Internet explorer

� TOPMARGIN="Valeur en pixel" définit une marge en haut du document.

� BOTTOMMARGIN="Valeur en pixel" définit une marge en bas du document.

� LEFTMARGIN="Valeur en pixel" définit une marge à gauche du document.



Programmation Web

� LEFTMARGIN="Valeur en pixel" définit une marge à gauche du document.

� RIGHTMARGIN="Valeur en pixel" définit une marge à droite du document.

� attributs ne fonctionnent que sous Netscape.

� MARGINWIDTH="Valeur en pixel" définit une marge dans la largeur du

document.

� MARGINHEIGHT="Valeur en pixel" définit une marge dans la hauteur du

document.

Mohamed MANAA

Un titre pertinent

...

� Les attributs ONLOAD et UNONLOAD

�ONLOAD="Nom d'une fonction" ouvre une fonction JavaScript à l'affichage de la page

�ONUNLOAD="Nom d'une fonction" ouvre une fonction JavaScript à la sortie de la page.

...


...

Mohamed MANAA

Le texteLe texte

� Les titres

�Comme dans un traitement de texte, la mise en forme hiérarchisée du texte

améliore l'aspect visuel du document.

� Le langage HTML met six niveaux de titres différents à la disposition des

programmeurs.


Programmation Web

�Cependant, le résultat fourni par les six balises de titre peut dépendre du

navigateur utilisé pour afficher les pages.

� La commande marque le début du titre.

� La commande marque la fin du titre.

Mohamed MANAA

Le texteLe texte

Code Description Exemple

Premier titre Titre 1 Premier titreSecond titre Titre 2 Second titre


Programmation Web

Troisième titre Titre 3 Troisième titre

Quatrième titre Titre 4 Quatrième titre

Cinquième titre Titre 5 Cinquième titre

Sixième titre Titre 6 Sixième titre

Mohamed MANAA

Le texteLe texte

� Les paragraphes

�Une balise permet de formater un texte brut en paragraphe.

� La commande

marque le début du paragraphe.

� La commande

marque la fin du paragraphe.


Programmation Web

Titre

Paragraphe

...


Mohamed MANAA

� L'alignement des paragraphes

� L'attribut ALIGN="Type d'alignement" permet l'alignement du texte.

� Les options possibles d'alignement sont "Left" (par défaut) pour la gauche,

"right" pour la droite ou "center" pour le centre.

Le texteLe texte


Programmation Web

Titre

� La police de caractères

�Plusieurs commandes permettent de définir les caractéristiques de la police, en

l'occurrence le type, la taille et la couleur des caractères.

�Une autre commande se charge de l'ensemble des caractéristiques précitées, il

s'agit de "".

Le texteLe texte


Programmation Web

� Un attribut "FACE" définit la police,

� Un attribut "SIZE" s'occupe de la taille

� Un attribut "COLOR" prend en charge la couleur.

� La commande définit les caractéristiques des

caractères.

� La commande ferme la commande.

Mohamed MANAA


...

...

Le texteLe texte


Programmation Web

Titre

Paragraphe

Texte ... Diverses commandes HTML

...

...

Mohamed MANAA

Le texteLe texte

� La taille de la police

� La taille de la police se définit par l'attribut "SIZE" de l'instruction "".

� La taille de la police est déterminée à partir de sept valeurs, la troisième étant la

valeur par défaut : ou

� La couleur de la police

� L’attribut COLOR permet d'appliquer une couleur à la police de caractère. Il suffit de

l'utiliser dans la balise "".

� La valeur de la couleur à spécifier s'effectue soit par un code alphanumérique soit par

un nom : COLOR="#C000000" ou COLOR="red".

Le texteLe texte


Programmation Web

�En outre l'attribut "TEXT" de la commande se chargeait déjà de la couleur

du texte pour l'ensemble du document tandis que l'attribut "COLOR" s'applique à des

portions de texte.

Paragraphe

Texte

Mohamed MANAA

� Les listes�HTML offre plusieurs types de liste :

� des listes à puces, les listes numérotées.�Les listes à puces

� comportent trois différentes types de puces�mais tous les navigateurs ne les reconnaissent malheureusement

pas. En général, par défaut sera affiché des puces en forme de

Le texteLe texte


Programmation Web

pas. En général, par défaut sera affiché des puces en forme dedisque plein.

� La commande ouvre une liste à puce.�La commande ferme la liste à puce.

� La commande introduit une entrée dans la liste.�La commande ferme une entrée dans la liste.

� L'attribut TYPE="Forme" donne le type de puces.� L'attribut VALUE="Valeur" associe cette valeur à cet élément de liste.� L'attribut COMPACT permet de rendre la liste plus compacte mais est

obsolète en HTML 4.0.

Mohamed MANAA

Le texteLe texte

Commande Description Exemple

Puce en forme de

disque plein

•Ligne 1

•Ligne 2

•Ligne 3

Puce en forme de cercle oLigne 1

Ligne 1Ligne 2Ligne 3


Programmation Web

vide oLigne 2

oLigne 3

Puce en forme de carré

plein

�Ligne 1

�Ligne 2

�Ligne 3

Puce en forme par

défaut

•Ligne 1

•Ligne 2

•Ligne 3

Mohamed MANAA

Le texteLe texte

Les listes à puces

Titre

Paragraphe

Texte


Programmation Web

Texte

Première entrée

Seconde entrée

...

Mohamed MANAA

Le texteLe texte

� Les listes numérotées

� Le langage HTML permet de numéroter les listes de plusieurs façons par

l'intermédiaire de l'attribut qui s'applique également dans ce cas.

� Un attribut spécial permet de commencer une numérotation à partir d'un numéro

précis.

� La commande ouvre la liste numérotée.


Programmation Web

� La commande ouvre la liste numérotée.

� La commande ferme la liste numérotée.

� L'attribut START="Valeur de départ" permet de débuter la numérotation à un

point précis.

� L'attribut TYPE="Type de puces" donne l'apparence des puces.

� L'attribut COMPACT permet de rendre la liste plus compacte mais est obsolète

en HTML 4.0.

Mohamed MANAA

Les listes numérotées

Le texteLe texte


Puce de type chiffre

arabe

1.Ligne 1

2.Ligne 2

3.Ligne 3



Programmation Web

3.Ligne 3

Puce de type lettre

minuscule

l.Ligne 1

m.Ligne 2

n.Ligne 3

Puce de type lettre

majuscule

A.Ligne 1

B.Ligne 2

C.Ligne 3

Ligne 3



Mohamed MANAA


Le texteLe texte


Puce de type

numérotation romaine

minuscule

i.Ligne 1

ii.Ligne 2

iii.Ligne 3



Programmation Web

minuscule iii.Ligne 3

Puce de type

numérotation romaine

majuscule

V.Ligne 1

VI.Ligne 2

VII.Ligne 3

Ligne 3


Mohamed MANAA

Le texteLe texte

Titre

Paragraphe

Texte



Programmation Web

Texte

Première entrée

Seconde entrée

...

Mohamed MANAA

Html (Hyper Text Markup Language) est un langage hypertexte qui vous permet en

cliquant sur un mot, généralement souligné (ou une image) de vous transporter :

� vers un autre endroit du document.

Les liensLes liens


Programmation Web

� vers un autre fichier Html situé sur votre ordinateur.

� vers un autre ordinateur situé sur le Web.

...

Mohamed MANAA

Les liensLes liens

Lien externeLien externe

� Tout ordinateur situé sur le réseau Internet possède une adresse ou une URL

� ce sont les adresses du type :

� http://serveur/chemin.../fichier

� ftp://serveur/chemin.../fichier


Programmation Web

� ftp://serveur/chemin.../fichier

� mailto:utilisateur@hôte

Les ancresLes ancres

�Lien vers une ancre dans la même page ...

�Lien vers une ancre dans une autre page ...

Mohamed MANAA

Les liensLes liens

La page 1

Aller vers le document 2


Programmation Web

La page 2

Aller vers le document 1

Mohamed MANAA

La directive TARGET

� Permet de spécifier la zone de l'écran ou il convient de placer l'URL spécifié dans

un lien HREF.

� Son utilisation principale est dans un contexte de cadres.

� Dans les liens de la table des matières il faut indiquer que les pages citées doivent

Les liensLes liens


Programmation Web

être affichées dans la seconde fenêtre.

•TARGET="_blank" : force l'appel d'une nouvelle fenêtre.

•TARGET="_self" : Force l'appel d'une page dans la même fenêtre.

•TARGET="_parent" : Force l'appel à la page mère.

•TARGET="_top" : Force l'appel à la première page de la liste.

Lien

Mohamed MANAA

� Les liens internes permettent de créer des renvois à l'intérieur du même

document HTML.

� Pour faire fonctionner ces liens, il suffit de déclarer une ancre dans le

document puis de créer le renvoi vers cette ancre.

Les liens internes

Les liensLes liens


Programmation Web

document puis de créer le renvoi vers cette ancre.

� La commande définit l'ancre à atteindre.

� La commande définit le lien.

� La commande ferme le lien.

Mohamed MANAA

Un titre pertinent

...

...


Les liensLes liens


Programmation Web


...

Revenir

...

...

Haut de page

Bas de page

...

Mohamed MANAA

� Les formats graphiques

� Un document HTML peut comporter des images de type et de capacité

diverses.

� Trois types d'images sont appréciés pour leur compression, et partant,

pour leur faible taille :

Les imagesLes images


Programmation Web

pour leur faible taille :

� le JPEG (Joint Photographic Expert Group)

� le GIF (Graphic Interchange Format)

� le PNG (Portable Network Graphic).

� pourrait devenir le format graphique de l'avenir.

Mohamed MANAA


� Les images GIF sont particulièrement intéressantes du fait de leurs

propriétés, en l'occurrence la transparence et l'animation.

� L'avantage du format GIF est également de permettre d'afficher sur

n'importe quel couleur de page, des éléments graphiques avec un fond

transparent.


Programmation Web

transparent.

� Les images JPEG offrent une résolution et une gamme de couleurs élevés

permettant l'affichage d'éléments graphiques de haute qualité.

� Le format PNG gère la transparence comme le GIF et un codage des

couleurs sur 24 bits à l'instar du JPEG.

�Néanmoins, la taille de ces images demeure encore trop importante.

Mohamed MANAA

� il est possible d’insérer des images dans un document HTML

� il est aussi possible de leur donner des caractéristiques :

� images simples

� images réactives aux événements de la souris

� images à zones réactives (images dont les zones réagissent à la souris



Programmation Web

� images à zones réactives (images dont les zones réagissent à la souris

et mènent à des liens différents)

Contrôle la largeur de la bordure (0 par défaut

borderHauteur de l’image (facultatif)

height

Alignement de l’imagealignLargeur de l’image (facultatif)

width

Texte alternatif (texte s’affichant en cas de problème avec l’image

altURL de l’image à inclure

src

SignificationAttributSignificationAttribut

Contrôle la largeur de la bordure (0 par défaut

borderHauteur de l’image (facultatif)

height

Alignement de l’imagealignLargeur de l’image (facultatif)

width

Texte alternatif (texte s’affichant en cas de problème avec l’image

altURL de l’image à inclure

src


Mohamed MANAA

Fichier d'aide

Fichier d'aide

Fichier d'aide



Programmation Web

Fichier d'aide

Lien sur imageLien sur image

Mohamed MANAA

� Les liens

�Les images en coordonnées

�La balise possède deux attributs permettant de rendre des images

interactives.

�Ils découpent une hyperimage en plusieurs zones dans le but de créer

plusieurs liens différents à partir d'un support identique.



Programmation Web

plusieurs liens différents à partir d'un support identique.

�L'attribut SHAPE="Forme" définit le type de forme d'une zone de

découpage.

�L'attribut COORDS="Liste de coordonnées" définit les

coordonnées de la zone de découpage.

�La balise permet de créer, aussi, ce type d'images, mais l'instruction

peut être utilisé dans des cas particuliers comme avec la balise

notamment.

Mohamed MANAA

� Les zones sensibles

� Un découpage en zones distinctes d'un élément graphique peut être un atout

indéniable.

�Exemple: un utilisateur ayant besoin de fabriquer des liens par rapport aux

régions de France



Programmation Web

� La balise offrent deux attributs pour définir le type d'image sensible

�L'attribut USEMAP="Nom d'ancre" attribue un nom d'ancre à une image

sensible côté client.

� La commande MAP NAME="Ancre cible" entame la définition des zones

sensibles de l'image

� La commande AREA SHAPE="Forme" COORDS="Coordonnées"

HREF="Adresse cible" permet de décrire une zone sensible.

Mohamed MANAA


AREA SHAPE

Forme Description Coordonnées Exemple

rect Définit une zone rectangulaire

X1, Y1 = Coin supérieur gaucheX2, Y2 = Coin inférieur droit

polygon Définit une zone polygonale

X1, Y1 = Premier point du polygone X2, Y2 = Second point du polygone Xn, Yn = Nième point du polygone

Mohamed MANAA



Programmation Web

Mohamed MANAA

� Les tableaux servent non seulement à aligner des chiffres mais surtout à

placer des éléments à l'emplacement que vous souhaitez

� L'usage des tableaux est très fréquent

� Un tableau est composé de lignes et de colonnes qui forment les cellules

du tableau

Les tableauxLes tableaux


Programmation Web

du tableau

Début et fin de tableau

Début et fin de ligne

Début et fin de cellule

Description d’une case de type titre

Fin de description de titre

Mohamed MANAA



Marge intérieure des cellulesCellpaddingDétermine la largeur du tableau (en % ou en pixels)

Width

Largeur entre les cellulesCellspacingSpécifie l’alignement du tableau dans la page

Align


Marge intérieure des cellulesCellpaddingDétermine la largeur du tableau (en % ou en pixels)

Width

Largeur entre les cellulesCellspacingSpécifie l’alignement du tableau dans la page

Align


Programmation Web

Détermine le style qui doit être appliqué au tableau

classContrôle la largeur de la bordureBorder

Donne un identifiant au tableauIdCouleur de fond des cellulesBgcolor

Spécifie quels côtés de la bordure sont visibles

FrameSpécifie le nombre de colonnes du tableau

Cols

% ou en pixels)

Détermine le style qui doit être appliqué au tableau

classContrôle la largeur de la bordureBorder

Donne un identifiant au tableauIdCouleur de fond des cellulesBgcolor

Spécifie quels côtés de la bordure sont visibles

FrameSpécifie le nombre de colonnes du tableau

Cols

% ou en pixels)

Mohamed MANAA

volume 80%

poids 35%



Programmation Web

Tarif au ../../..

Article 1Ref 002 30DT

Mohamed MANAA

Modèle Vitesse
en Km/heureConsommation
en litre/100 km

Marque Type Numéro de série



Programmation Web

Peugeot 106 B2 234.34 132 5,7

Citroën AX AT67B8 6789 126 5,5

Mohamed MANAA

� La structure

� Les cadres (frames) permettent de fractionner la surface d'affichage en

plusieurs parties afin d'afficher différentes pages HTML simultanément dans

le navigateur.

� Ces cadres servent notamment à afficher d'un côté une série de liens

Les cadresLes cadres


Programmation Web

� Ces cadres servent notamment à afficher d'un côté une série de liens

comme un menu ou un sommaire et de l'autre côté des pages

contenant des informations en relation.

� La commande marque le début de la définition des cadres.

� La commande marque la fin de la définition des

cadres.

Mohamed MANAA



...


Programmation Web

...

... Diverses commandes HTML

...

Mohamed MANAA


� La création

� Les cadres sont créés au sein des balises .

� La balise fabriquant ces cadres possèdent deux attributs essentiels

� un spécifiant la page cible


Programmation Web

� l'autre définissant un nom pour le cadre

� La commande crée un cadre dans le document HTML.

� L'attribut SRC="Adresse du contenu" définit le contenu du cadre.

� L'attribut NAME="Nom du cadre" permet de nommer le cadre.

Mohamed MANAA

...



Programmation Web

...


...

Mohamed MANAA


� Les dimensions

� Deux attributs permettent de définir des dimensions pour chacun descadres.

� L'attribut COLS="Largeur1,Largeur2,..." définit une largeur pour lescadres.

� L'attribut ROWS="Hauteur1,Hauteur2,..." définit une hauteur pour les


Programmation Web

� L'attribut ROWS="Hauteur1,Hauteur2,..." définit une hauteur pour lescadres.

� Les deux attributs acceptent des valeurs en pourcentage ou en pixels.

� Une étoile peut remplacer une des valeurs et constitue, donc, unedimension variable.

� Dans un environnement de cadres, la division se fera soit verticalement soithorizontalement, les deux ensembles étant impossible.

� Pour opérer une division horizontale et verticale, il faudra créer deux imbriqués l'un dans l'autre.

Mohamed MANAA

�

Division verticale en trois parties égales

�

Division horizontale en deux parties



Programmation Web

Division horizontale en deux parties

�

Division horizontale en deux parties sur 640 pixels

�

Division horizontale en deux parties sur 480 pixels

Mohamed MANAA


exemple :

rows="200,*" (une colonne de 200 pixels puis le reste pour l’autre colonne)

cols="80%,*" (une ligne de 80% de l’écran puis le reste)

rows="10%,70%,*" (une colonne de 10% une autre de 70%, puis le reste)


Programmation Web

� SRC = "nom URL" (nom URL correspond à un fichier)

� SCROLLING ="yes" (barres de scrolling (yes) ou absence (no))

� NAME="nom de la fenêtre"(possibilité de nommé da fenêtre)

� NORESIZE (empêche l’utilisateur de modifier la taille de la fenêtre)

� MARGINWIDTH=m (défini la marge verticale de m pixel)

� MARGINHEIGTH=n (défini la marge horizontale de n pixel)

Mohamed MANAA



Programmation Web

dommage votre BROWSER ne gère pas les frames

Mohamed MANAA

� Avec un formulaire, on peut recueillir de l'information et ensuite en faire le

traitement

� Un formulaire peut contenir :

� Des cases à cocher

Les formulairesLes formulaires


Programmation Web

� Des cases radios

� Une boîte liste

� Une boîte liste déroulante

� Une boîte texte

� Une boîte texte multilignes

� Des boutons Reset - Submit - Button

� Un bouton sous forme d'image

Mohamed MANAA


� Les caractéristiques de transmissions

� Il y a deux méthodes d'accès au serveur http, GET et POST :

� La méthode GET fait en sorte que l'information passe par la variable

QUERY_STRING pour interpréter les données.

� Cette méthode devrait être utilisée quand l'objet de la demande


Programmation Web

est d'obtenir de l'information du serveur.

� Elle permet de transférer une faible quantité de données, au

maximum 256 caractères.

� La méthode POST permet de changer ou ajouter des informations au

serveur.

� Celle-ci provoque l'envoi de fichiers complets au serveur.

� Elle est privilégiée dans le cas d'un courrier eMail.

Mohamed MANAA

La balise INPUT TYPE="TEXT" : création d'une zone de saisie



Votre nom et prénom :

Votre nom et prénom :



La balise INPUT TYPE="CHECKBOX" crée une série de cases à cocher non

exclusives

Quelle est votre langue maternelle ?

Arabe


Programmation Web

Arabe

Français

Anglais

Autre

Quelle est votre langue maternelle ? Arabe Français Anglais Autre

Mohamed MANAA


La balise INPUT TYPE="RADIO" crée une série de cases à cocher exclusives

Femme ou homme ?

Femme


Programmation Web

Femme

Homme

Femme ou homme ?

Femme Homme

Mohamed MANAA


La balise SELECT permet de mettre en place des menus déroulants.

De quel continent êtes-vous ?

AfriqueAmériqueAsie


Programmation Web

AsieEuropeOcéanie

De quel continent êtes-vous ?

Si on ne met pas SIZE

Mohamed MANAA


� La balise TEXTAREA crée une zone de saisie multi-lignes.

� Il convient de spécifier la taille de cette zone avec ROWS="valeur" et

COLS="valeur"

Votre Message :


Programmation Web

Votre Message :

Mohamed MANAA


� La balise SUBMIT crée un bouton qui sert à déclencher l'action

associée au formulaire


Programmation Web

� La balise RESET crée un bouton qui sert à effacer ce que vous avez

rempli dans un formulaire, sans l'envoyer.

Mohamed MANAA

E nvo ye r

E f f a c e r


Votre nom :
Qui sont tes amis ?
Ahmed
Med
Sami


Programmation Web

Ali
Ton meilleur ami ?
Ahmed
Med

Sami
Ali

Mohamed MANAA

� Les formats vidéos

� Un document HTML peut accueillir divers éléments multimédias tels que

des vidéos ou des sons.

� Les vidéos au format AVI ou quicktime consomment énormément demémoire, une seconde avec une définition de 320x240, 16 millions de

couleurs et 15 images par secondes représente environ 3 méga-octets sans

Le multimédiaLe multimédia


Programmation Web

couleurs et 15 images par secondes représente environ 3 méga-octets sans

compression.

� Le format MPEG permet une compression efficace pour une dégradation

infime par rapport aux deux autres. Le résultat est immédiatement visible

non seulement au niveau de l'occupation mémoire mais aussi par voie deconséquence au niveau du temps.

� Les trois formats précités restent les plus répandus sur le World Wide Web,

ainsi le langage HTML les supporte et offre les outils nécessaire à leurintégration dans une page Internet.

Mohamed MANAA


� L'insertion des vidéos

� La commande IMG, utilisée pour l'affichage d'image, permet égalementd'insérer dans une page Web des fichiers vidéos au format AVI, Quicktimeou MPEG auxquels s'ajoutent les mondes VRML (Virtual Reality ModelingLanguage).

� La commande insère unevidéo ou un monde VRML.� L'attribut START="fileopen/mouseover"* définit la méthode de


Programmation Web

� L'attribut START="fileopen/mouseover"* définit la méthode dedémarrage d'une vidéo. Deux options sont possible :� FILEOPEN (valeur de défaut) signifie que le vidéo débutera

lorsque le document sera complètement chargé,� MOUSEOVER signifie que le vidéo démarrera lorsque l'usager

déplacera la souris devant l'animation.� L'attribut LOOP="Nombre de répétitions" détermine le nombre de

répétitions d'une vidéo.� L'attribut CONTROLS" permet l'affichage des éléments de contrôle� Les autres attributs de cette balise sont identiques à celles de la

commande d'insertion d'image.

Mohamed MANAA


Un titre pertinent

...


Programmation Web

...


...

Mohamed MANAA

� Les formats audios

� Le son est soumis aux mêmes exigences que les vidéos, le temps detéléchargement et la capacité en mémoire.

� Les formats WAVE, AIFF, ou MIDI sont reconnus dans une page web etpeuvent rendre vos documents HTML plus vivant, mais au risque de lesrendre plus lent au chargement.

� En conséquence, les fichiers au format MIDI seront généralement préférés



Programmation Web

� En conséquence, les fichiers au format MIDI seront généralement préféréspour leur très faible consommation en ressource, près de dix milles foisinférieurs au premier.

� Il existe plusieurs outils permettant de lire des fichiers audios à partir d'unepage Web.

� Windows Media Player : édité par Microsoft,

� Quicktime Player: édité par Apple,

� Real Player : édité par Real Networks,

� Crescendo : édité par LiveUpdate.

Mohamed MANAA


Lancement d'un son au démarrage

Un titre pertinent

...


Programmation Web

...

... ...

Mohamed MANAA

� L'insertion d’un son par EMBED

� Cette commande permet d'insérer dans un document HTML, des fichiersmultimédias vidéos ou audios de différents types ; AVI, Quicktime, MPEG,MIDI, WAVE, MP3, etc.

� La commande insère un fichier multimédia.et la commande termine la commande précitée.



� L'attribut SRC="Adresse du média" indique l'adresse du fichiermultimédia à jouer.

� L'attribut PLUGINSPACE="Adresse de l'application" indique l'adressede l'application.

� L'attribut TYPE="Type d'application" spécifie le type d'applicationdestinée à lancer le fichier.

� La commande insère un contenu alternatif si lacommande EMBED n'est pas supportée.

� La commande termine la commande précitée.


HTML 5HTML 5



Les feuilles de style : ConceptLes feuilles de style : Concept

Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles

� CSS : Cascading StyleSheets / feuilles de style en cascade

� Le concept des feuilles de style est introduit en 1997 par Microsoft

� La norme Html 4.0 en a repris le concept (CSS version 1)

� Cascade : plusieurs feuilles de style peuvent être combinées et que les styles

peuvent être hérités en cascade

Programmation Web

peuvent être hérités en cascade

� Un langage simple pour associer des propriétés de style à des éléments

dans les documents structurés (html, xml) (en séparant la présentation des

documents du leur contenu)

� Les feuilles de style ont été mises au point afin de compenser les manques

du langage HTML en ce qui concerne la mise en page et la présentation

Mohamed MANAA

Les feuilles de style : ObjectifsLes feuilles de style : Objectifs


Séparation du contenu et de la mise en forme.

Cohésion de la présentation tout au long du site avec les feuilles de style

externes.

Programmation Web

Modifier l'aspect d'une page ou d'un site sans en modifier le contenu et cela

en quelques lignes plutôt que de devoir changer un grand nombre de balises.

Un "langage" neuf, compréhensible, simple et logique par rapport au Html

et à ses différentes versions.

Mohamed MANAA

Les feuilles de style : DéclarationLes feuilles de style : Déclaration


Il y a plusieurs méthodes pour déclarer des CSS :

� en en-tête de documents :

h1{font-family:arial ; font-size:14pt ; font-weight:bold ; color:black }

Programmation Web

� en lien dans l'en-tête de documents :

� directement dans une balise :

blabla

Mohamed MANAA

Une règle CSS est caractérisée par deux principaux éléments :

� Un sélecteur de balises, permettant de préciser à quelles balises du document

le style s'applique ;

� Une déclaration de style, définie entre accolades, permettant de préciser le

style à appliquer aux balises sélectionnées. La déclaration est elle-même

Les feuilles de style : SyntaxeLes feuilles de style : Syntaxe


Programmation Web

constituée :

� d'une ou plusieurs propriété(s), suivie du caractère « : » (double point),

� d'une ou plusieurs valeur(s) associée(s) à chaque propriété, entourée de

guillemets s'il s'agit de plusieurs mots ou séparés par des virgules s'il y en a

plusieurs, suivie d'un point virgule.

balise { propriété de style: valeur; propriété de style: valeur }

Exp : H1 { font-family: Arial; font-style: italic }

Mohamed MANAA

Les feuilles de style : Les classesLes feuilles de style : Les classes


� Pour affecter des styles différents à une même balise, les feuilles de style

proposent la solution des classes.

� La définition d'un style était : balise {propriété de style: valeur}. Elle devient :

balise.nom_classe { propriété de style: valeur } Ou, comme la mention de la

balise est facultative : .nom_classe { propriété de style: valeur }

Programmation Web

balise est facultative : .nom_classe { propriété de style: valeur }

� L'emploi du point « . » devant le nom de la classe est obligatoire.

� Pour appeler l'effet de style dans le document, on ajoute le nom de la classe

à la balise.

...

Mohamed MANAA

On souhaite mettre ce qui est important dans le texte en gras et en bleu. On

crée la classe « .essentiel » :

.essentiel { font-weight: bold; color: green }

Et dans le document Html, il suffit d'appeler la classe « essentiel » quand cela se

Les feuilles de style : Les classes (Exemple)Les feuilles de style : Les classes (Exemple)


Programmation Web

Et dans le document Html, il suffit d'appeler la classe « essentiel » quand cela se

révèle nécessaire :

Text 1

Text 2

paragraphe

Titre 1

Mohamed MANAA

Les feuilles de style : Les balises et Les feuilles de style : Les balises et


� Il faut penser à un système pour déconnecter certains morceaux de

paragraphe ou plusieurs paragraphes de cette logique d'écriture avec des

feuilles de style.

� Ce sont respectivement les balises SPAN et DIV qui créent ainsi des petits

blocs particuliers dans le document sans devoir passer par les éléments

Programmation Web

blocs particuliers dans le document sans devoir passer par les éléments

structurels du Html classique.

� Notons que SPAN et DIV s'utilisent toujours avec les classes.

� La balise permet d'appliquer des styles à des parties du texte d'un

paragraphe.

� La balise permet de regrouper plusieurs paragraphes c'est-à-dire de

délimiter une zone comportant plusieurs paragraphes.

Mohamed MANAA

Les feuilles de style : Exemple Les feuilles de style : Exemple


.element {font-size: x-large }

Programmation Web

Un monde de géants.

Mohamed MANAA

.zone {font-size: x-small}

Texte Normal

Texte 1

Les feuilles de style : Exemple Les feuilles de style : Exemple


Programmation Web

Texte 1

Texte 2

Ce code donne comme résultat :Texte NormalTexte 1Texte 2

Mohamed MANAA

Les feuilles de style : Positionner avec CSSLes feuilles de style : Positionner avec CSS


� Il est possible de positionner, au pixel près, du texte ou une image dans une

page HTML avec les feuilles de style.

� Il y a deux types de position : position absolue et position relative.

� La position absolue {position: absolute} se détermine par rapport au coin

supérieur gauche de la fenêtre du navigateur. Les coordonnées de ce point sont

Programmation Web

top = 0 et left = 0. Les coordonnées d'un point s'expriment en pixels, du haut en

bas pour top et de gauche à droite pour left.

� La position relative {position: relative} se détermine par rapport à d'autres

éléments de la page, par exemple un élément du code Html.

� On utilise souvent le positionnement absolu car c’est plus

facile et plus sûr

Mohamed MANAA



Positionner une image

même pour placer une image on utilise la propriété « position » pour laquelle on

précise le type de position absolue ou relative et les valeur en pixels de top et left.

Exemple :

Plaçons l'image « htmlplus.gif » en position absolue à 50 pixels de haut de la

Programmation Web

fenêtre (top) et à 100 pixels à gauche (left). Les dimensions de l'image sont

width=242 et height=84.

Mohamed MANAA



Superposer du texte sur une image

On peut superposer du texte sur une image en placent l’image dans l’emplacement

voulu puis on ajoute le texte en le placent dans l’emplacement convenable.

Exemple :

Reprenons l'image « dauphine.jpg » et on y superposera le nom de l'auteur au

Programmation Web

pixel près dans la barre qui souligne le terme Html.

HTML>

ISET SBZ 2010-2011

Mohamed MANAA

Les feuilles de style : Liste des propriétésLes feuilles de style : Liste des propriétés


Type de style Nom de propriété

Utilisation Exemple

styles de police font-familydéfinit un nom de police ou unefamille de police ou police précise (Arial, Times,Helvetica...) ou famille (serif, sans-serif, cursive, fantasy, monospace)

H3 {font-family: Arial}

font-style définit le style de l'écriture H3 {font-style: italic}

Programmation Web

font-style définit le style de l'écriturenormal ou italique ou oblique

H3 {font-style: italic}

font-sizedéfinit la taille de la policexx-small ou x-small ou small oumédium ou large ou x-large ou xx-large ou larger ou smaller ou tailleprécise en pixels (px) oupourcentage (%)

P {font-size: 12pt}

Mohamed MANAA

styles du textetext-align définit l'alignement du texte

left ou center ou right ou justifyH1 {text-align: center}

color définit la couleur du texte H3 {color : blue}

widthdétermine la longueur d'un élémentde texte ou d'une image en pixels(px) ou pourcentage (%)

H1 {width: 200px}

height détermine la hauteur d'un élément H1 {height: 100px}

Type de style Nom de propriété

Utilisation Exemple

Les feuilles de style : Liste des propriétésLes feuilles de style : Liste des propriétés


Programmation Web

height détermine la hauteur d'un élémentde texte ou d'une image

H1 {height: 100px}

text-decorationdéfinit une décoration du texte, soitbarré, clignotant, etc.blink ou underline ou line-throughou overline ou none

A:visited {text-decoration: blink}

styles d’arrière-planbackground-color définit la couleur de l'arrière-plan BODY {background-color:

Red}background-image définit l'image de l'arrière-plan BODY {background-

image: image.gif}

styles de listelist-style-type détermine le type de puces ou de

numérotationdisc ou circle ou square

OL {list-style-type: square}

Mohamed MANAA

Les feuilles de style : ExempleLes feuilles de style : Exemple


CV


body {background: silver;color: black;}h3 {background: gray;color: red;font-weight: bold;


Programmation Web

font-weight: bold;text-transform: uppercase;}

styleCV.css

Mohamed MANAA



phrase 1

Body {color: blue ;}P {color: red;}.A {color: yellow;}

monstyle.CSS

Programmation Web

phrase 1

Phrase 2

Phrase 3

Phrase 4 Phrase 5

Phrase 6

phrase 7..

De quelle couleur s’affichent ces 7 phrases ?

Mohamed MANAA