programmation web 1€¦ · c'est le langage de programmation utilisé pour créer des pages web la...
TRANSCRIPT
-
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 : InternetProgrammation Web : Internet
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 Web : InternetProgrammation Web : Internet
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 : InternetProgrammation Web : 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 : InternetProgrammation Web : Internet
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 : InternetProgrammation Web : Internet
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 : InternetProgrammation Web : Internet
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
-
HistoriqueHistorique
� 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
-
HistoriqueHistorique
� 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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
Programmation Web
Ceci est notre premier document HTML
Mohamed MANAA
-
Les commentaires Les commentaires
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
-
Les balises METALes balises META
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 : HTMLProgrammation Web : HTML
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
Les balises METALes balises META
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
-
Le corps d’un document HTMLLe corps d’un document HTML
Un titre pertinent
....
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
...
Diverses commandes HTML
...
Mohamed MANAA
-
Le corps d’un document HTMLLe corps d’un document HTML
� 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 : HTMLProgrammation Web : HTML
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
-
Le corps d’un document HTMLLe corps d’un document HTML
Un titre pertinent
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
...
...
Diverses commandes HTML
...
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.
Le corps d’un document HTMLLe corps d’un document HTML
Programmation Web : HTMLProgrammation Web : HTML
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.
...
Diverses commandes HTML
...
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
Programmation Web
Titre
Paragraphe
...
Diverses commandes HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
-
Un titre pertinent ...
...
...
Le texteLe texte
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
Commande Description Exemple
Puce de type chiffre
arabe
1.Ligne 1
2.Ligne 2
3.Ligne 3
Ligne 1Ligne 2Ligne 3
Programmation Web : HTMLProgrammation Web : HTML
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
Ligne 1Ligne 2Ligne 3
Ligne 1Ligne 2Ligne 3
Mohamed MANAA
-
Les listes numérotées
Le texteLe texte
Commande Description Exemple
Puce de type
numérotation romaine
minuscule
i.Ligne 1
ii.Ligne 2
iii.Ligne 3
Ligne 1Ligne 2Ligne 3
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
minuscule iii.Ligne 3
Puce de type
numérotation romaine
majuscule
V.Ligne 1
VI.Ligne 2
VII.Ligne 3
Ligne 3
Ligne 1Ligne 2Ligne 3
Mohamed MANAA
-
Le texteLe texte
Titre
Paragraphe
Texte
Les listes numérotées
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
...
...
Diverses commandes HTML
Les liensLes liens
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
Diverses commandes HTML
...
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 : HTMLProgrammation Web : HTML
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 imagesLes images
� 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 : HTMLProgrammation Web : HTML
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
Les imagesLes images
Programmation Web : HTMLProgrammation Web : HTML
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
SignificationAttributSignificationAttribut
Mohamed MANAA
-
Fichier d'aide
Fichier d'aide
Fichier d'aide
Les imagesLes images
Programmation Web : HTMLProgrammation Web : HTML
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.
Les imagesLes images
Programmation Web : HTMLProgrammation Web : HTML
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
Les imagesLes images
Programmation Web : HTMLProgrammation Web : HTML
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
-
Les imagesLes images
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
-
Les imagesLes images
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
-
Les tableauxLes tableaux
SignificationAttributSignificationAttribut
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
SignificationAttributSignificationAttribut
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 : HTMLProgrammation Web : HTML
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%
Les tableauxLes tableaux
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
Tarif au ../../..
Article 1Ref 002 30DT
Mohamed MANAA
-
Modèle Vitesse
en Km/heureConsommation
en litre/100 kmMarque Type Numéro de série
Les tableauxLes tableaux
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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
-
Les cadresLes cadres
Un titre pertinent ...
...
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
...
... Diverses commandes HTML
...
Mohamed MANAA
-
Les cadresLes cadres
� 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 : HTMLProgrammation Web : HTML
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
-
...
Les cadresLes cadres
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
...
Diverses commandes HTML
...
Mohamed MANAA
-
Les cadresLes cadres
� 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 : HTMLProgrammation Web : HTML
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
Les cadresLes cadres
Programmation Web : HTMLProgrammation Web : HTML
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
-
Les cadresLes cadres
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 : HTMLProgrammation Web : HTML
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
-
Les cadresLes cadres
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
dommage votre BROWSER ne gère pas les frames
Mohamed MANAA
-
Les cadresLes cadres
Programmation Web : HTMLProgrammation Web : HTML
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 : HTMLProgrammation Web : HTML
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 formulairesLes formulaires
� 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 : HTMLProgrammation Web : HTML
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
Les formulairesLes formulaires
Programmation Web : HTMLProgrammation Web : HTML
Votre nom et prénom :
Votre nom et prénom :
Programmation WebMohamed MANAA
-
Les formulairesLes formulaires
La balise INPUT TYPE="CHECKBOX" crée une série de cases à cocher non
exclusives
Quelle est votre langue maternelle ?
Arabe
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
Arabe
Français
Anglais
Autre
Quelle est votre langue maternelle ? Arabe Français Anglais Autre
Mohamed MANAA
-
Les formulairesLes formulaires
La balise INPUT TYPE="RADIO" crée une série de cases à cocher exclusives
Femme ou homme ?
Femme
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
Femme
Homme
Femme ou homme ?
Femme Homme
Mohamed MANAA
-
Les formulairesLes formulaires
La balise SELECT permet de mettre en place des menus déroulants.
De quel continent êtes-vous ?
AfriqueAmériqueAsie
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
AsieEuropeOcéanie
De quel continent êtes-vous ?
Si on ne met pas SIZE
Mohamed MANAA
-
Les formulairesLes formulaires
� 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 : HTMLProgrammation Web : HTML
Programmation Web
Votre Message :
Mohamed MANAA
-
Les formulairesLes formulaires
� La balise SUBMIT crée un bouton qui sert à déclencher l'action
associée au formulaire
Programmation Web : HTMLProgrammation Web : HTML
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
-
Les formulairesLes formulaires
Votre nom :
Qui sont tes amis ?
Ahmed
Med
SamiProgrammation Web : HTMLProgrammation Web : HTML
Programmation Web
Ali
Ton meilleur ami ?
Ahmed
MedSami
AliMohamed 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 : HTMLProgrammation Web : HTML
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
-
Le multimédiaLe multimédia
� 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 : HTMLProgrammation Web : HTML
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
-
Le multimédiaLe multimédia
Un titre pertinent
...
Programmation Web : HTMLProgrammation Web : HTML
Programmation Web
...
Diverses commandes HTML
...
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
Le multimédiaLe multimédia
Programmation Web : HTMLProgrammation Web : HTML
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
-
Le multimédiaLe multimédia
Lancement d'un son au démarrage
Un titre pertinent
...
Programmation Web : HTMLProgrammation Web : HTML
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.
Le multimédiaLe multimédia
Programmation Web : HTMLProgrammation Web : HTML
� 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.
Programmation WebMohamed MANAA
-
HTML 5HTML 5
Programmation Web : HTMLProgrammation Web : HTML
Programmation WebMohamed MANAA
-
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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 : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
� 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 : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
� 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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
.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 : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
� 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
-
Les feuilles de style : Positionner avec CSSLes feuilles de style : Positionner avec CSS
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
-
Les feuilles de style : Positionner avec CSSLes feuilles de style : Positionner avec CSS
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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 : Les feuilles de stylesProgrammation Web : Les feuilles de styles
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
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
CV
-
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
body {background: silver;color: black;}h3 {background: gray;color: red;font-weight: bold;
Les feuilles de style : ExempleLes feuilles de style : Exemple
Programmation Web
font-weight: bold;text-transform: uppercase;}
styleCV.css
Mohamed MANAA
-
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
Les feuilles de style : ExempleLes feuilles de style : Exemple
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
-
Programmation Web : Les feuilles de stylesProgrammation Web : Les feuilles de styles
Les feuilles de style : ExempleLes feuilles de style : Exemple
Programmation WebMohamed MANAA