Ernaelsten Gérard - Frédéric FiléePage 1 ESA Ecole Supérieure des Affaires Cours de Programmation Web : PHP Chapitre 2 : le langage du Web, XHTML.

Présentation au sujet: "Ernaelsten Gérard - Frédéric FiléePage 1 ESA Ecole Supérieure des Affaires Cours de Programmation Web : PHP Chapitre 2 : le langage du Web, XHTML."— Transcription de la présentation:

1 Ernaelsten Gérard - Frédéric FiléePage 1 ESA Ecole Supérieure des Affaires Cours de Programmation Web : PHP Chapitre 2 : le langage du Web, XHTML

2 Ernaelsten Gérard - Frédéric FiléePage 2 ESA Ecole Supérieure des Affaires Chapitre 2: plan 1. Généralités 2. Structure d’un document XHTML 3. Éléments de mise en forme 4. Les formulaires 5. Les feuilles de style

3 Ernaelsten Gérard - Frédéric FiléePage 3 ESA Ecole Supérieure des Affaires 1. Généralités 1.1. Généalogie 1.2. Éléments, balises, attributs 1.3. Règles de base

4 Ernaelsten Gérard - Frédéric FiléePage 4 ESA Ecole Supérieure des Affaires 1.1. Généalogie  1986 : SGML (trop complexe) ‏  1992 : HTML (Tim Berners-Lee) ‏  Évolution anarchique  1996 : CSS  1998 : HTML 4 et CSS 2 : version stricte  1998 : XML  2000 : XHTML  2006 : XHTML 2.0 (draft version, abandonné fin 2009)  2009 : HTML 5 et XHTML5 (draft version)

5 Ernaelsten Gérard - Frédéric FiléePage 5 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Éléments, balises: –Tout contenu doit être enfermé dans un élément –Chaque élément est inséré dans une balise d’ouverture et une balise de fermeture Contenu Contenu

6 Ernaelsten Gérard - Frédéric FiléePage 6 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Eléments –Chaque élément a un nom –Liste des éléments utilisables est définie (Document Type Definition) ‏

7 Ernaelsten Gérard - Frédéric FiléePage 7 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Éléments, attributs : –Attributs de l’élément : caractéristiques (largeur, hauteur, alignement du contenu…) ‏ –Définis dans la balise d’ouverture –Doivent être séparés les uns des autres par au moins une espace typographique –Tout attribut doit avoir une valeur (≠ HTML4) ‏ –Certains attributs sont obligatoires, certains attributs sont facultatifs, certains attributs ont une valeur par défaut –La valeur des attributs doit être entre guillemets doubles

8 Ernaelsten Gérard - Frédéric FiléePage 8 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Éléments, attributs : Contenu Contenu –le contenu d’un élément peut être :  Du texte ou  D’autres éléments => hiérarchie

9 Ernaelsten Gérard - Frédéric FiléePage 9 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Les attributs de base : –3 catégories :  Les attributs courants (noyau) : s’appliquent à quasiment tous les éléments  Les attributs d’internationalisation : relatifs aux langages d’une page  Les attributs de gestion d’événements : gestion des événements en JavaScript

10 Ernaelsten Gérard - Frédéric FiléePage 10 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Les attributs courants : –id : identifie un élément de manière unique en lui donnant un nom (permet d’appliquer un style ou un comportement JS) ‏ –class : le nom d’une classe CSS qui contient des définitions de style –title : texte qui apparaît dans une bulle quand le curseur est positionné qqs instants sur un élément –style : style local pour un élément. Toléré en XHTML 1.1 mais déconseillé.

11 Ernaelsten Gérard - Frédéric FiléePage 11 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Les attributs d’internationalisation : –xml:lang : remplace l’attribut lang de HTML4 –dir : indique le sens de lecture (ltr: gauche à droite; rtl: droit à gauche) ‏

12 Ernaelsten Gérard - Frédéric FiléePage 12 ESA Ecole Supérieure des Affaires 1.2. Eléments, balises, attributs  Les attributs de gestion d’événements : onclick, ondblclik, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup

13 Ernaelsten Gérard - Frédéric FiléePage 13 ESA Ecole Supérieure des Affaires 1.3. Règles de base  Éléments et attributs sont « case-sensitive » et doivent être écrits en minuscules  Avoir une balise d’ouverture et une balise de fermeture (élément vide : / >) ‏  Pas de chevauchement : premier-ouvert-dernier- fermé  Valeur des attributs entre guillemets doubles  Tous les attributs utilisés doivent avoir une valeur  Attribut « name » doit être remplacé par « id »

14 Ernaelsten Gérard - Frédéric FiléePage 14 ESA Ecole Supérieure des Affaires 1.3. Règles de base  Document conforme : –Respect des règles d’inclusion telles qu’elles sont définies dans la DTD choisie –Voir site web du W3C

15 Ernaelsten Gérard - Frédéric FiléePage 15 ESA Ecole Supérieure des Affaires 1.3. Règles de base 7 règles d’or : 1.imbrication correcte des balises ( ) ‏ 2.Balises et attributs en minuscules 3.Balises vides terminées ( ) ‏

16 Ernaelsten Gérard - Frédéric FiléePage 16 ESA Ecole Supérieure des Affaires 1.3. Règles de base 4.Balises non vides fermées ( ) ‏ 5. Valeur des attributs entre guillemets ( ) ‏ 6. Attributs aux valeurs explicites ( ) 7.Attribut id à utiliser en plus de name

17 Ernaelsten Gérard - Frédéric FiléePage 17 ESA Ecole Supérieure des Affaires 2. Structure d’un document (X)HTML 2.1. Introduction 2.2. Les éléments de base 2.3. Les balises structurantes 2.3.1. L’élément racine 2.3.1. L’élément racine 2.3.2. L’élément 2.3.2. L’élément 2.3.3. L’élément 2.3.3. L’élément

18 Ernaelsten Gérard - Frédéric FiléePage 18 ESA Ecole Supérieure des Affaires 2.1. Introduction  Les élements de base : –Déclaration XML –Déclaration XML –Déclaration DTD –Déclaration DTD  Les balises structurantes : –La racine du document –La racine du document –L’élément –L’élément

19 Ernaelsten Gérard - Frédéric FiléePage 19 ESA Ecole Supérieure des Affaires 2.1. Introduction <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML et CSS Le corps de la page minimale <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" />

20 Ernaelsten Gérard - Frédéric FiléePage 20 ESA Ecole Supérieure des Affaires 2.2. Les éléments de base (XHMTL)  Déclaration XML –Attribut de numéro de version de XML –Attribut encoding : nom du jeu de caractère  Déclaration DTD –Nom générique de la DTD –Adresse du fichier qui contient la DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

21 Ernaelsten Gérard - Frédéric FiléePage 21 ESA Ecole Supérieure des Affaires 2.2. Les éléments de base (HTML 5)  En HTML 5, il y a une simple déclaration doctype, et pas de référence à une DTD …

22 Ernaelsten Gérard - Frédéric FiléePage 22 ESA Ecole Supérieure des Affaires 2.3. Les balises structurantes  

23 Ernaelsten Gérard - Frédéric FiléePage 23 ESA Ecole Supérieure des Affaires 2.3.1. L’élement racine 2.3.1. L’élement racine  Conteneur de premier niveau  Contient deux enfants : et  Contient deux enfants : et  3 attributs facultatifs : –xml:lang : code de langue normalisée –dir : sens de la lecture –xmlns : espace de nom utilisé dans la page

24 Ernaelsten Gérard - Frédéric FiléePage 24 ESA Ecole Supérieure des Affaires 2.3.2. L’élement 2.3.2. L’élement Titre de la page

25 Ernaelsten Gérard - Frédéric FiléePage 25 ESA Ecole Supérieure des Affaires 2.3.2. L’élement 2.3.2. L’élement  Contient des éléments informatifs sur la page  Pas de répercussion directe sur l’affichage de la page  Contient six éléments possibles : – : élément de contenu, titre de la page, affiché dans la zone de titre du navigateur (seul élément visible), élément unique – : élément vide, attribut obligatoire href qui contient une URL (URL de base de tous les fichiers utilisés), élément unique

26 Ernaelsten Gérard - Frédéric FiléePage 26 ESA Ecole Supérieure des Affaires 2.3.2. L’élement 2.3.2. L’élement – : élément vide, lien entre la page XHTML et un document externe, élément multiple. Attributs :  rel : nom de la relation (rel="stylesheet" pour une feuile de style, rel="alternate" pour une page alternative, rel="shortcut icon" pour l'icône identifiant le site,...) ‏  type : précise le type de contenu du fichier externe (type = "text/css" pour une feuille de style, type = "text/javascript" pour un script JavaScript, type = "text/html", type = "text/xml", type = "images/x-icon" pour une icône…) ‏  href : contient l’adresse de la ressource  media : précise le type de média (utile pour les CSS, media = "screen" pour l'écran classique, media="print" pour une imprimante, media="tv" pour un téléviseur, media="handheld" pour un PDA ou un téléphone) ‏

27 Ernaelsten Gérard - Frédéric FiléePage 27 ESA Ecole Supérieure des Affaires 2.3.2. L’élement 2.3.2. L’élement – : élément vide, méta-informations pour les moteurs de recherche, les navigateurs et les serveurs web, élément multiple. Attributs :  name ou http-equiv : contient le nom de l’info (par exemple, author, keywords, robots, revisit-after, Content-type, expires…) ‏  content : valeur associée à l’information – : élément de contenu, pour inclure du JavaScript dans le XHTML. Peut également être utilisé dans le corps du document – : permet de lier la page à des styles

28 Ernaelsten Gérard - Frédéric FiléePage 28 ESA Ecole Supérieure des Affaires 2.3.3. L’élément 2.3.3. L’élément  Conteneur de l’ensemble des éléments textuels et graphiques d’une page web  Interdit d’y inclure du texte brut.  La liste des éléments qui peuvent être inclus directement dans body est définie : address, blockquote, del, div, dl, fieldset, form, h1, h2, h3, h4, h5, h6, hr, ins, ol, noscript, p, pre, script, table, ul

29 Ernaelsten Gérard - Frédéric FiléePage 29 ESA Ecole Supérieure des Affaires 2.3.3. L’élément 2.3.3. L’élément  Voir l’exemple du cours: element_body_complet.html Remarquez la structure générale et les quelques éléments peu « habituels »: address, fieldset et legend, ins, tbody…

30 Ernaelsten Gérard - Frédéric FiléePage 30 ESA Ecole Supérieure des Affaires 3. Éléments de mise en forme 3.1. Distinction préliminaire : éléments en ligne / éléments en bloc 3.2. Du texte et des listes 3.3. Des images et du multimédia 3.4. Des liens 3.5. Des tableaux

31 Ernaelsten Gérard - Frédéric FiléePage 31 ESA Ecole Supérieure des Affaires 3.1. Distinction préliminaire  Dans les éléments XHTML : –Éléments « en ligne » (inline) :  S’insèrent dans le texte pour l’enrichir (lien hypertexte, mise en évidence, mise en gras, etc.)  Ne peuvent jamais contenir des éléments en bloc ,,,,, ,,,,, –Éléments « bloc » (block) :  Servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc.  Servent à distinguer les parties entières de texte, comme des titres, des paragraphes, des listes, des citations, etc.  Peuvent en général contenir des éléments en ligne ,, …,,,, ,, …,,,,

32 Ernaelsten Gérard - Frédéric FiléePage 32 ESA Ecole Supérieure des Affaires 3.2. Du texte et des listes  3.2.1. Du texte : –Les titres –Les pararaphes –Les divisions de page –Quelques éléments de bloc –Quelques éléments de styles sémantiques –Quelques éléments de styles physiques  3.2.2. Des listes –Les Listes ordonnées –Les listes à puces –Les listes de définition

33 Ernaelsten Gérard - Frédéric FiléePage 33 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Les titres : –Balises jusqu’à –Balises jusqu’à –Par défaut les navigateurs utilisent des polices dégressives (h1 est le plus grand et h6 est le plus petit) et ajoutent un saut de ligne –Niveau de titre lié à la sémantique et non à la taille physique –Possible de les redéfinir dans un style personnalisé –Voir la liste des éléments enfants possibles et des éléments parents possibles

34 Ernaelsten Gérard - Frédéric FiléePage 34 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Les niveaux de titre <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Titre de niveau 4 Titre de niveau 5 Titre de niveau 6 <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" height="20" width="88" />

35 Ernaelsten Gérard - Frédéric FiléePage 35 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Les paragraphes : –Balises –Balises –Par défaut précédé et suivi d’un saut de ligne –Peut contenir du texte, mais aussi des images, des objets multimédia, des éléments de formulaire… (en fait tous les éléments en ligne) ‏

36 Ernaelsten Gérard - Frédéric FiléePage 36 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Les divisions de page : –Balises –Balises –Précédé et suivi par défaut d’un simple retour à la ligne –Structure la page : permet de grouper dans un seul bloc un ensemble de texte ou d’éléments –Généralement pour lui appliquer un style

37 Ernaelsten Gérard - Frédéric FiléePage 37 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Les paragraphes et divisions de page <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" /> <link rel="shortcut icon" type="images/x-icon“ href="../images/favicon.ico" /> Les paragraphes et divisions de page Utilisation de <p> Un paragraphe avec des <p> Un deuxième paragraphe Utilisation de <div> Un paragraphe avec des <div> Un deuxième paragraphe <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" />

38 Ernaelsten Gérard - Frédéric FiléePage 38 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Quelques éléments de bloc : – :  créer une division de petite taille dans le corps d’une page (blocs de citation) ‏  Ne peut contenir du texte directement – –  Préserve la présentation, les espaces et indentations du texte  Police par défaut fixe  Peut contenir du texte, des éléments en ligne, mais pas d’images

39 Ernaelsten Gérard - Frédéric FiléePage 39 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Quelques éléments de bloc : – : pour afficher une adresse de contact (// à ) ‏ – et : pour afficher des infos supprimées et leur version actualisée – pour les formulaires – : crée des groupes de composants, par défaut délimités par un liseré fin. Le contenu de s’affiche dans le liseré.

40 Ernaelsten Gérard - Frédéric FiléePage 40 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Quelques éléments en ligne sémantiques : – : équivalent en ligne de – : équivalent en ligne de – : pour les abbréviations – : pour les acronymes – : pour modifier le sens de lecture – : pour des citations courtes (// ) ‏ – : pour insérer du code source dans une phrase – : pour une définition de terme – : pour les saisies au clavier – : pour un exemple – : pour mettre en valeur des variables

41 Ernaelsten Gérard - Frédéric FiléePage 41 ESA Ecole Supérieure des Affaires 3.2.1. Du texte  Quelques éléments de styles physiques : – : gras – et : italique – et : taille du texte – et : exposant et indice – : espacement fixe – : retour à la ligne

42 Ernaelsten Gérard - Frédéric FiléePage 42 ESA Ecole Supérieure des Affaires 3.2.2. Des listes  Les listes ordonnées : –Balises –Balises  Les listes non ordonnées (listes à puces) : –Balises –Balises  Règles : – ou doit au moins contenir un élément – ou doit au moins contenir un élément – renferme le contenu visible de chaque item – peut contenir d’autres ou (listes imbriquées) ‏

43 Ernaelsten Gérard - Frédéric FiléePage 43 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Listes Liste ordonnée <ol> <li> 1er élément Liste à puce <ul> <li> 1er sous élément Liste à puce <ul> <li> 2ème sous élément Liste ordonnée <ol> <li> 2ème élément Liste à puce <ul> <li> 1er sous élément Liste à puce <ul> <li> 2ème sous élément

44 Ernaelsten Gérard - Frédéric FiléePage 44 ESA Ecole Supérieure des Affaires 3.2.2. Des listes  Les listes de définition : –Balises –Balises – ne peut contenir que et – ne peut contenir que et – contient le terme à définir – contient la définition du terme –Les navigateurs affichent les définitions indentées de plusieurs caractères par rapport aux termes

45 Ernaelsten Gérard - Frédéric FiléePage 45 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Les listes de définitions XHTML eXtensible HyperText Markup Language CSS Cascading Style PHP PHP Hypertext Preprocessor SQL Structured Query Language

46 Ernaelsten Gérard - Frédéric FiléePage 46 ESA Ecole Supérieure des Affaires 3.3. Des images et du multimédia 3.3.1. Les images 3.3.2. Les images réactives 3.3.3. Les objets et le multimédia

47 Ernaelsten Gérard - Frédéric FiléePage 47 ESA Ecole Supérieure des Affaires 3.3.1. Les images  De nombreux formats d’images existent  En général on se limite aux principaux : –GIF :  Graphics Interface Format,  Extension.gif  limité à 256 couleurs,  pour les icônes, les bandeaux  Peut être animé  Affichage progressif possible grâce à l’entrelacement

48 Ernaelsten Gérard - Frédéric FiléePage 48 ESA Ecole Supérieure des Affaires 3.3.1. Les images –JPEG :  Joint Photographic Experts Group  Extension.jpeg ou jpg  Permet la création d’images en 24 bits (16 millions de couleurs)  Pour des photographies  Peut être assez lourd

49 Ernaelsten Gérard - Frédéric FiléePage 49 ESA Ecole Supérieure des Affaires 3.3.1. Les images –PNG :  Portable Network Graphics  Extension.png  Créé par le W3C comme Alternative au GIF, qui serait protégé par un droit d’auteurs (PNG est libre de droits) ‏ Attention: pas plus de 5 secondes d’attente sur une page => taille adaptée des images

50 Ernaelsten Gérard - Frédéric FiléePage 50 ESA Ecole Supérieure des Affaires 3.3.1. Les images  Balise  Balise –Élément « remplacé » : le contenu est vide est c’est un des attributs qui spécifie ce qui est affiché (src) ‏ –Attributs :  src : détermine l’image, de manière absolue ou relative; il est obligatoire  Les attributs height et width fixent la taille  alt : description de l’image à afficher si pas disponible

51 Ernaelsten Gérard - Frédéric FiléePage 51 ESA Ecole Supérieure des Affaires... Insertion d'images <img src="./images/java.jpg" alt="JAVA" title="Logo java" width="20%" /> <img src="./images/php.gif" alt="php" title="Logo php" width="45" height="35" /> PHP <img src="./images/java.jpg" alt="JAVA" title="Logo Java" width="45" height="35" /> JAVA...

52 Ernaelsten Gérard - Frédéric FiléePage 52 ESA Ecole Supérieure des Affaires 3.3.2. Les images réactives  Possible de créer des images avec différentes zones réactives (cliquables) ‏  Idée : créer une carte qui définit les zones sensibles de l’image  Balises définissent cette carte  L’attribut usemap de associe la carte à l’image (référe attributs id ou title de, précédé d’un #) ‏

53 Ernaelsten Gérard - Frédéric FiléePage 53 ESA Ecole Supérieure des Affaires... Les sites des régions <area href="http://www.orleans.fr" alt="Région Centre" shape="rect" coords="142,118,188,180" /> <area nohref="nohref" onclick="alert('Visitez la plus belle ville du monde');" alt="Région parisienne" shape="circle" coords="180,98,16" /> <area href="http://www.nantes.fr" onfocus="alert('Nantes en plein développement');" alt="Pays de Loire" shape="poly" coords="76,146,95,110,138,130,94,182,76,146" /> <img usemap="#regions" src="./images/france.gif" alt="Carte des régions" width="344" height="336"/>...

54 Ernaelsten Gérard - Frédéric FiléePage 54 ESA Ecole Supérieure des Affaires 3.3.2. Les images réactives  Attributs shape et coords de : –shape : permet de définir la forme de la zone sensible –coords :  vient en complément de shape pour indiquer les dimensions de la forme choisie.  L’origine des coordonnées est le sommet supérieur gauche de l’image, et l’unité de mesure est le « pixel » (px).

55 Ernaelsten Gérard - Frédéric FiléePage 55 ESA Ecole Supérieure des Affaires 3.3.2. Les images réactives –"rect" :  définit un rectangle (par défaut) ‏  coords : indique alors les coordonnées des sommets supérieur gauche et inférieur droit du rectangle –"circle" :  définit un cercle  coords : indique alors les coordonnées du centre suivies du rayon –"poly" :  définit un polygone quelconque  coords : indique alors les coordonnées de tous les sommets dans l’ordre (la dernière doit répéter celles du point de départ) ‏ –"default" :  gère les clics en dehors d’une des zones sensibles sur l’image

56 Ernaelsten Gérard - Frédéric FiléePage 56 ESA Ecole Supérieure des Affaires 3.3.3. Les objets  Permettre au navigateur d’afficher des composants non reconnus par défaut (par exemple, une image « tiff », ou « bmp » ) ‏  Balise  Balise –Contenu n’est pas visible et est une substitution –Attributs :  data : détermine le fichier à afficher, de manière absolue ou relative; il est obligatoire  type : précise le type MIME du fichier indiqué dans data  Les attributs height et width fixent la taille  standby : texte à afficher durant le chargement

57 Ernaelsten Gérard - Frédéric FiléePage 57 ESA Ecole Supérieure des Affaires 3.3.3. Les objets –Peut contenir 0, 1 ou plusieurs éléments :  Permet de passer des paramètres  A l’application chargée de lire le fichier correspondant au type MIME spécifié  Attributs : –name : nom du paramètre –value : valeur du paramètre

58 Ernaelsten Gérard - Frédéric FiléePage 58 ESA Ecole Supérieure des Affaires... Insertion d'images en tant qu'objets Logo PHP en gif <object data="./images/php.gif" id="img1" title="Logo de PHP" width="40"> logo php en gif Logo PHP en bmp <object data="./images/php.bmp" id="img2" title="Logo de PHP en bmp" type="image/bmp" standby="PHP en bmp" width="40"> logo php en bmp Logo PHP en tif <object data="./images/php.tif" id="img3" title="Logo de PHP en tiff" type="image/tiff" standby="PHP en tiff" width="40"> logo php en tif...

59 Ernaelsten Gérard - Frédéric FiléePage 59 ESA Ecole Supérieure des Affaires 3.3.3. Les objets  permet aussi d’afficher : –Des animations flash –Des vidéos –Des fichiers audio –Des applets JAVA

60 Ernaelsten Gérard - Frédéric FiléePage 60 ESA Ecole Supérieure des Affaires 3.3.3. Les objets OBJET FLASH <object data="./images/souris.swf" title="FLASH" type="application/x- shockwave-flash" standby="Souris" width="1300" height="400"> OBJET FLASH NON AFFICHE

61 Ernaelsten Gérard - Frédéric FiléePage 61 ESA Ecole Supérieure des Affaires OBJET VIDEO <object data="./images/test.mpg" title="hw" type="application/x-mplayer2" standby="Video MPEG" width="320" height="255" > test.mpg OBJET VIDEO <object data="./images/test.avi" type="application/x-mplayer2" width="320" height="255"> test.avi

62 Ernaelsten Gérard - Frédéric FiléePage 62 ESA Ecole Supérieure des Affaires 3.3.3. Les objets Lecture d'un fichier MP3 <object type="application/x-mplayer2" data="./images/test.mp3" height="80" width="300" /> test.mp3

63 Ernaelsten Gérard - Frédéric FiléePage 63 ESA Ecole Supérieure des Affaires 3.4. Des liens 3.4.1. La balise 3.4.1. La balise 3.4.2. Les liens sur les boutons et les images 3.4.3. Les liens actifs

64 Ernaelsten Gérard - Frédéric FiléePage 64 ESA Ecole Supérieure des Affaires 3.4.1. La balise 3.4.1. La balise  Balises et  Balises et –Élément en ligne (peut être inclus à de nombreux endroits) ‏ –Le contenu entre les balises (texte ou image) est visible et sensible au clic –Attributs :  href : cible du lien (ancre, interne ou externe) ‏  accesskey : raccourci clavier (ALT + la lettre indiquée) ‏  type : type MIME de l’élément cible

65 Ernaelsten Gérard - Frédéric FiléePage 65 ESA Ecole Supérieure des Affaires Le site du <a id="lien1" href="http://w3.org" onmouseover="alert('Ne manquez pas le site du W3C');"> W3C Le site du <a id="lien2" href="http://w3.org/TR/xhtml11" accesskey="A" tabindex="2" title="Référence XHTML 1.1 (Alt+A)">XHTML 1.1 Le logo de PHP <a id="lien3“ href="http://www.php.net/images/php.gif" accesskey="E" tabindex="5" title="Logo PHP(Alt+E)">Lien vers logo PHP La doc CSS 2.1 au format <a id="lien4" href="./images/css2.pdf" accesskey="A" type="application/pdf" title="CSS 2.1 (Alt+A)">PDF Lire une image au format <a id="lien4" href="./images/php.tif" accesskey="R" tabindex="10" type="image/tiff" title="PHP en TIFF (Alt+R)"> TIFF Une ancre vers le lien au W3C Pour le lien vers le W3C, cliquez ici

66 Ernaelsten Gérard - Frédéric FiléePage 66 ESA Ecole Supérieure des Affaires 3.4.2. Les boutons et les images  Les liens sur les boutons Incorporer entre et Incorporer entre et Mais pour IE, cela ne fonctionne pas. Il faut rajouter l’événement onclick sur le bouton.  Les liens sur les images Incorporer entre et Incorporer entre et

67 Ernaelsten Gérard - Frédéric FiléePage 67 ESA Ecole Supérieure des Affaires Le site du XHTML XHTML Le site du php <button type="button" onclick="window.location='http://php.filee.be'"> PHP Le site officiel du php

68 Ernaelsten Gérard - Frédéric FiléePage 68 ESA Ecole Supérieure des Affaires 3.4.3. Les liens actifs  Les liens peuvent, notamment : –Provoquer l’envoi d’un mail (mailto:) ‏ –Provoquer l’exécution d’un script JavaScript (javascript:) ‏ Contactez-moi Afficher la date

69 Ernaelsten Gérard - Frédéric FiléePage 69 ESA Ecole Supérieure des Affaires Liens vers des scripts JavaScript <!-- function ladate()‏ { jour= new Date; alert(jour); } function fondrouge()‏ { col="#F00"; document.getElementById('divid').style.backgroundColor=col; } --> Lancer des scripts JAVASCRIPT Afficher la date Créer un fond rouge pour cette division

70 Ernaelsten Gérard - Frédéric FiléePage 70 ESA Ecole Supérieure des Affaires 3.5. Des tableaux 3.5.1. Principes de base 3.5.2. Grouper des lignes 3.5.3. Fusionner des cellules 3.5.4. Aligner le contenu

71 Ernaelsten Gérard - Frédéric FiléePage 71 ESA Ecole Supérieure des Affaires 3.5.1. Principes de base  Tableau composé de lignes et de colonnes, avec des cellules qui peuvent être fusionnées  Balises : – est le conteneur principal de type bloc – est l’élément de ligne (prioritaire) ‏ – ou est l’élément de cellule (ou de cellule d’en-tête) (// colonne) ‏

72 Ernaelsten Gérard - Frédéric FiléePage 72 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Tableau élémentaire Un tableau élémentaire Ligne 1 Colonne 1 Ligne 1 Colonne 2 Ligne 1 Colonne 3 Ligne 2 Colonne 1 Ligne 2 Colonne 2 Ligne 2 Colonne 3 Ligne 3 Colonne 1 Ligne 3 Colonne 2 Ligne 3 Colonne 3

73 Ernaelsten Gérard - Frédéric FiléePage 73 ESA Ecole Supérieure des Affaires 3.5.1. Principes de base  Attributs de  Attributs de –border="N" : largeur des bordures en pixels (implicite) ‏ –width="N" : largeur totale du tableau dans la page (en % ou en px) ‏ –cellpadding ="N" : marge interne d’une cellule par rapport à sa bordure (en % ou en px) ‏ –cellspacing ="N" : écart entre les bordures de chaque cellule (si border !=0) (en % ou en px) ‏ –frame: pour gérer l’affichage des bordures externes (void, above, below, lhs, rhs, hsides, vsides, box, border) ‏ –rules: pour gérer l’affichage des bordures internes d’un tableau (none, rows, cols, all, groups) ‏

74 Ernaelsten Gérard - Frédéric FiléePage 74 ESA Ecole Supérieure des Affaires 3.5.2. Grouper les lignes  Grâce à,,  Grâce à,,  permet de créer une « en-tête » ou un « pied de tableau » (càd un groupe de lignes) ‏  sera mise en évidence par défaut.  Les lignes:  Les lignes:  Les cellules :  Les cellules :

75 Ernaelsten Gérard - Frédéric FiléePage 75 ESA Ecole Supérieure des Affaires 3.5.3. Fusionner des cellules  Sur une même ligne : –Fusion de cellules sur plusieurs colonnes –Attribut colspan="N" de ou, où N spécifie le nombre de cellules  Sur une même colonne : –Fusion de cellules sur plusieurs lignes –Attribut rowspan ="N" de ou, où N spécifie le nombre de cellules

76 Ernaelsten Gérard - Frédéric FiléePage 76 ESA Ecole Supérieure des Affaires 3.5.4. Aligner le contenu  Pour les éléments,,,,,  Pour les éléments,,,,,  Attribut align : alignement horizontal (left, center, right, justify, char) ‏  Attribut valign : alignement vertical (top, middle, bottom, baseline) ‏  Priorité : /, puis, puis / /, puis  Priorité : /, puis, puis / /, puis

77 Ernaelsten Gérard - Frédéric FiléePage 77 ESA Ecole Supérieure des Affaires Tableau avec en-tête et pied.rouge{background-color:red;color:white}.bleu{background-color:green;color:white;} Statistiques des points en cours PHP thead : Nom Résultat Echec Doit représenter tfood : Nom Résultat Echec Doit représenter (...)‏

78 Ernaelsten Gérard - Frédéric FiléePage 78 ESA Ecole Supérieure des Affaires (...)‏ Elèves OK Hugo 3 OUI Georges 2 OUI Elèves bof Toto 17 NON NON Tata 11 NON OUI

79 Ernaelsten Gérard - Frédéric FiléePage 79 ESA Ecole Supérieure des Affaires 4. Les formulaires 4.1. Généralités 4.2. Les composants de formulaires 4.2.1. Les boutons send et reset 4.2.2. Les saisies de texte 4.2.3. Les boutons radios et les cases à cocher 4.2.4. Les listes 4.2.5. Les champs cachés 4.2.6. L’upload de fichier 4.3. Exemple : un formulaire complet

80 Ernaelsten Gérard - Frédéric FiléePage 80 ESA Ecole Supérieure des Affaires  Formulaires = possibilités d’échanges entre l’utilisateur d’internet et une application web  Balises : (élément de bloc) ‏  Ne peut pas contenir d’autres formulaires  Attributs : –action : attribut obligatoire, adresse du script de traitement –method : méthode d’envoi des données, valeur get ou post.

81 Ernaelsten Gérard - Frédéric FiléePage 81 ESA Ecole Supérieure des Affaires 4.2.1. Les boutons send et reset  Bouton send = bouton d’envoi –Transmet au serveur les données du formulaire –3 implémentations possibles :  avec le type "submit"  avec le type "submit"  Ou avec le type "submit"

82 Ernaelsten Gérard - Frédéric FiléePage 82 ESA Ecole Supérieure des Affaires  Ou avec le type "image" et onclick="submit( )"  Bouton reset = bouton de réinitialiation –Remet le formulaire dans son état initial (valeurs par défaut) ‏ – avec le type "reset" – avec le type "reset"

83 Ernaelsten Gérard - Frédéric FiléePage 83 ESA Ecole Supérieure des Affaires 4.2.2. Les saisies de texte  Le texte uniligne – avec le type "text" – avec le type "text" – avec le type "password" – avec le type "password"  Le texte multiligne – – Nom : Pwd : Adresse : Indiquez votre adresse

84 Ernaelsten Gérard - Frédéric FiléePage 84 ESA Ecole Supérieure des Affaires 4.2.3. Les boutons radios et les cases  Les boutons radios –Plusieurs choix, mais une seule réponse –Tous les boutons « liés » ont le même « name » – avec le type "radio" – avec le type "radio" Monsieur <input type="radio" name="sexe" value="Monsieur" checked="checked" /> Madame

85 Ernaelsten Gérard - Frédéric FiléePage 85 ESA Ecole Supérieure des Affaires 4.2.3. Les boutons radios et les cases  Les cases à cocher –Ne font pas partie d’un « groupe » –Possible d’opérer plusieurs choix dans des cases différentes (créer autant de caes à cocher que de choix suggérés) ‏ – avec le type "checkbox" – avec le type "checkbox" Lu le contrat :

86 Ernaelsten Gérard - Frédéric FiléePage 86 ESA Ecole Supérieure des Affaires 4.2.4. Les listes de sélection  « drop list », dont le contenu est fixé  Sélection simple ou multiple  La liste est créée avec  La liste est créée avec  Chaque contenu est créé, dans le, par un  Chaque contenu est créé, dans le, par un France Belgique Suisse

87 Ernaelsten Gérard - Frédéric FiléePage 87 ESA Ecole Supérieure des Affaires 4.2.5. Les champs cachés  Pas saisis par l’utilisateur  Mais contiennent des données envoyées au serveur dans le formulaire  avec le type "hidden"  avec le type "hidden"

88 Ernaelsten Gérard - Frédéric FiléePage 88 ESA Ecole Supérieure des Affaires 4.2.6. L’upload de fichiers  Permet de transférer un fichier par le formulaire (photo, CV, description…) vers le serveur  avec le type "file"  avec le type "file"  L’élément doit utiliser la méthod post  Et doit avoir un attribut enctype="multipart/form-data"

89 Ernaelsten Gérard - Frédéric FiléePage 89 ESA Ecole Supérieure des Affaires 4.3. Un formulaire complet  Voir l’exemple du cours : element_form_complet.html  Avec déjà, son script php associé : element_form.complet.php

90 Ernaelsten Gérard - Frédéric FiléePage 90 ESA Ecole Supérieure des Affaires 5. Les feuilles de style 5.1. Généralités 5.2. Syntaxe de base 5.3. Sélecteurs et pseudo-classes 5.4. Les règles de gestion de conflit 5.4.1. Règles de « cascading » 5.4.2. L’héritage 5.5. Quelques éléments CSS2

91 Ernaelsten Gérard - Frédéric FiléePage 91 ESA Ecole Supérieure des Affaires 5.1. Généralités  Les feuilles de style = CSS = Cascading Style Sheets  Idée : séparer le contenu de la présentation  Double avantage : –Permet de centraliser la présentation en un point unique (facilité de maintenance, rigueur) ‏ –Permet de correspondre à une certaine « architecture » (structure, division du travail) ‏

92 Ernaelsten Gérard - Frédéric FiléePage 92 ESA Ecole Supérieure des Affaires 5.1. Généralités  CSS : contient des « styles » (précisément, des déclarations de styles) ‏  Qui vont être « implémentés » dans les pages (X)HTML

93 Ernaelsten Gérard - Frédéric FiléePage 93 ESA Ecole Supérieure des Affaires 5.2. Syntaxe de base  Contient 3 parties : –Un sélecteur : détermine l’élément cible et les conditions du style –Les déclarations de propriétés : les propriétés concernées de l’élément (entre accolades, séparées par « ; ») ‏ –L’affectation des valeurs de ces propriétés (après « : ») ‏

94 Ernaelsten Gérard - Frédéric FiléePage 94 ESA Ecole Supérieure des Affaires 5.2. Syntaxe de base  Syntaxe : selecteur { propriete1 : valeur1 ; propriete2 : valeur2 ;}  Peut être inclus : –Dans l’élément ou –Dans un fichier externe ( ) ‏ div {color : red ; background-color : yellow;}

95 Ernaelsten Gérard - Frédéric FiléePage 95 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  Les sélecteurs : –Simples : élément XHTML (sans ) ‏ –Multiples : plusieurs éléments XHTML (sans, séparés par une,) ‏ –Universels : pour tous les éléments (*) ‏ –Classes : correspond à l’attribut class des éléments XHTML, sélecteur précédé par un point (.) ‏ –D’identifiants : correspond à l’attribut id (unique dans la page), sélecteur précédé par un dièse (#) ‏ –D’attributs: sélectionne un élément dès qu’il possède un attribut donné, avec une valeur quelconque ou avec une valeur déterminée, sélecteur avec attribut et optionnellement valeur de l’attribut entre crochets ([]) ‏

96 Ernaelsten Gérard - Frédéric FiléePage 96 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Les sélecteurs p {color: red; background-color: blue;} h1,div,p.orange {color: orange;} ol li{background-color: gray; color: red;}.classe1 {color: red;}.classe2 {font-style: italic;}.classe3 {background-color: gray;} *.jaune{color: green;} div.jaune {color: yellow;} #orangebleu {color: blue; background-color: orange;} address[title="contact"] {background-color: black; color: white;} *[title] {font-weight: bold; font-style: italic;}...

97 Ernaelsten Gérard - Frédéric FiléePage 97 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  Combinaison des sélecteurs : –Un élément peut avoir plusieurs valeurs dans l’attribut class (class="classe1 classe2") –Un élément peut être concerné par plusieurs sélecteurs. Par ex, sélecteurs abstraits (.jaune). –Un sélecteur peut être défini dans une « position » d’éléments (sélecteur contextuel). Par exemple : div p{color: red;}

98 Ernaelsten Gérard - Frédéric FiléePage 98 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  Pseudo-classes et pseudo-éléments : –Attribuer un style à des parties non identifiées de la page par les éléments XHTML, mais par leur situation (ligne, paragraphe) ou par les actions qu’on peut leur appliquer (clic, placement du curseur…) ‏ –Syntaxe : élément:pseudo-classe (par ex., a:hover) ‏ –Par exemple: pseudo-classes de liens, pseudo-classes dynamiques

99 Ernaelsten Gérard - Frédéric FiléePage 99 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  Les pseudo-classes pour les liens : –a:link : attribuer un style vers un lien qui pointe vers un document non encore vu –a:visited : attribuer un style à un lien qui pointe vers un document déjà vu.

100 Ernaelsten Gérard - Frédéric FiléePage 100 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  Les pseudo-classes dynamiques : –:focus : attribuer temporairement un style à un élément qui a le focus (a:focus, input:focus…) (mal pris en compte par les navigateurs) ‏ –:hover : attribuer temporairement un style à un élément visible survolé par la souris (div:hover, a:hover…) ‏ –:active : attribut temporairement un style à un élément actif (clique sur son contenu) (a:active) ‏

101 Ernaelsten Gérard - Frédéric FiléePage 101 ESA Ecole Supérieure des Affaires 5.3. Sélecteurs et pseudo-classes  D’autres pseudo-classes: :first-child, :lang(code) ‏  Des pseudos-éléments: :first-letter (par ex., p:first-letter), :first-line (par ex., div:first-line), :before, : after  La déclaration « !important » au sein de propriétés (pour indiquer leur priorité, si conflit) ‏

102 Ernaelsten Gérard - Frédéric FiléePage 102 ESA Ecole Supérieure des Affaires <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Les sélecteurs CSS <link rel="stylesheet" type="text/css" href="css_pseudoclasses.css" media="screen" title="styles pseudo" />... p:hover {color: red; background-color: blue;} a:link {background-color: gray;} a:visited{color: green;} div:first-letter{font-weight: bold;} div:first-line{color: blue;}

103 Ernaelsten Gérard - Frédéric FiléePage 103 ESA Ecole Supérieure des Affaires 5.4. Les règles de gestion de conflit  Certains conflits peuvent surgir entre les différents styles => comment attribuer un style propre à un élément ? => règles de « CASCADE » => règle de l’héritage

104 Ernaelsten Gérard - Frédéric FiléePage 104 ESA Ecole Supérieure des Affaires 5.4.1. Les règles de « cascading » 1. Sélection du média 2. Par exemple, media="screen" 3. Sélection des styles marqués comme "!important" 4. Sélection des attributs « style » d’éléments de la page

105 Ernaelsten Gérard - Frédéric FiléePage 105 ESA Ecole Supérieure des Affaires 5.4.1. Les règles de « cascading » 1. Sélection des attributs les plus définis –nombre d’attributs id (div#orangebleu = 2) –puis nombre de classes (div.jaune a:hover) ‏ –puis nombre d’éléments XHTML (ol li) ‏ 2. Sélection selon l’ordre d’apparition: le dernier étant celui qui l’emporte (style défini par apparaît avant ceux de l’élément 2. Sélection selon l’ordre d’apparition: le dernier étant celui qui l’emporte (style défini par apparaît avant ceux de l’élément

106 Ernaelsten Gérard - Frédéric FiléePage 106 ESA Ecole Supérieure des Affaires 5.4.2. L’héritage  Dans la hiérarchie d’une page, certains éléments sont enfants de parents  Par héritage, les enfants reçoivent les styles définis par leur parent (direct ou indirect), qu’ils peuvent redéfinir. Lien hypertexte div:first-line{color: blue};

107 Ernaelsten Gérard - Frédéric FiléePage 107 ESA Ecole Supérieure des Affaires 5.5. Quelques éléments CSS2  La couleur d’avant-plan : color  La couleur d’arrière-plan : background-color (pas héritée par défaut) ‏  Une image de fond: background-image div{color: blue;} div{background-color: blue;} body{background-image: fondbleu.gif;}

108 Ernaelsten Gérard - Frédéric FiléePage 108 ESA Ecole Supérieure des Affaires 5.5. Quelques éléments CSS2  Positionner une image de fond: background-repeat et background-position  Créer une bordure d’éléments : border- style, border-width et border-color (ou border) ‏ body{background-image: fondbleu.gif; backbround- repeat: none; background-position: center top;} h1{border-style: dotted; border-width: thick; border-color: red}

109 Ernaelsten Gérard - Frédéric FiléePage 109 ESA Ecole Supérieure des Affaires 5.5. Quelques éléments CSS2  Taille des caractères : font-size  Mise en forme des caractères : font- weight et font-style body{font-size: large;} h1{font-size: larger;} p{font-size: 18px;} div{font-size: 120%;} body{font-weight: bold;} h1{font-style: italic;}

110 Ernaelsten Gérard - Frédéric FiléePage 110 ESA Ecole Supérieure des Affaires 5.5. Quelques éléments CSS2  Régler l’interligne : line-height  Aligner horizontalement : text-align  Dimensionner un élément: width, height h1{line-height: 20px;} h1{text-align: center;} div{width:80%; height: auto;}

111 Ernaelsten Gérard - Frédéric FiléePage 111 ESA Ecole Supérieure des Affaires 5.5. Quelques éléments CSS2  Positionner un élément flottant: float  Positionner un élément relatif ou fixe : position img{float: left;} div.droite{width: 200px; float: left;}