La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

11:07:591 Programmation Web : HTML Jérôme CUTRONA Programmation Web 2012-2013.

Présentations similaires


Présentation au sujet: "11:07:591 Programmation Web : HTML Jérôme CUTRONA Programmation Web 2012-2013."— Transcription de la présentation:

1 11:07:591 Programmation Web : HTML Jérôme CUTRONA Programmation Web

2 211:07:59 HTML = HyperText Markup Language ? Hyper : Non linéaire, liens entre nœuds Hyper : Non linéaire, liens entre nœuds Text : Composé de texte Text : Composé de texte Markup : Marqué, balisé Markup : Marqué, balisé Language : Langage Language : Langage Langage à balises de description de documents hypertextes Langage à balises de description de documents hypertextes Programmation Web

3 311:07:59 Quest-ce que HTML ? Langage de présentation de documents Langage de présentation de documents Nest PAS un langage de programmation Nest PAS un langage de programmation Langage : syntaxe STRICTE Langage : syntaxe STRICTE Utilisé pour construire les pages Web Utilisé pour construire les pages Web Navigation hypertexte : ancres, liens Navigation hypertexte : ancres, liens Utilise des balises Utilise des balises Documents exploités par des agents utilisateurs Documents exploités par des agents utilisateurs Navigateur pour « visualiser » le résultat Navigateur pour « visualiser » le résultat Robots des moteurs de recherche pour indexer Robots des moteurs de recherche pour indexer Automates divers pour traiter les données Automates divers pour traiter les données Programmation Web

4 411:07:59 Bref historique des normes WWW Project Proposal (mars 1989) WWW Project Proposal (mars 1989) W3 Consortium (1994) W3 Consortium (1994) HTML 1.0 (août 1994) HTML 1.0 (août 1994) HTML 2.0 (novembre 1995) HTML 2.0 (novembre 1995) HTML 3.2 (janvier 1997) HTML 3.2 (janvier 1997) HTML 4.0 (avril 1998) HTML 4.0 (avril 1998) HTML 4.01 (décembre 1999) HTML 4.01 (décembre 1999) XHTML 1.0 (janvier 2000) XHTML 1.0 (janvier 2000) HTML 5 depuis 2003, depuis 2007 au W3C, standard prévu en 2014 HTML 5 depuis 2003, depuis 2007 au W3C, standard prévu en 2014 Programmation Web

5 511:07:59 Pourquoi apprendre le langage HTML ? Il existe des éditeurs WYSIWYG Il existe des éditeurs WYSIWYG Adobe GoLive Adobe GoLive Macromedia Adobe Dreamweaver Macromedia Adobe Dreamweaver Microsoft FrontPage Microsoft FrontPage NetObjects Fusion NetObjects Fusion Netscape Composer Netscape Composer OpenOffice OpenOffice … Pages Web produites dynamiquement Pages Web produites dynamiquement Programme produisant du code HTML Programme produisant du code HTML VOUS écrivez le programme WYSIWYG hors jeu VOUS écrivez le programme WYSIWYG hors jeu What You See Is What You Get Programmation Web

6 Principe de HTML Structuration dun document texte Structuration dun document texte Apporter de la structure au document Apporter de la structure au document Apporter de la logique au document Apporter de la logique au document À laide de balises À laide de balises Document « simple » Document « simple » Structure et mise en forme sont liées Structure et mise en forme sont liées Titre plus gros, numérotation automatique Titre plus gros, numérotation automatique Paragraphe = nouvelle ligne Paragraphe = nouvelle ligne Livre = long texte Livre = long texte Contenu du livre = ensemble de chapitres et de paragraphes Contenu du livre = ensemble de chapitres et de paragraphes Informations sur le livre ne faisant pas partie intégrante de lhistoire = titre, auteur, résumé, année de parution, … Informations sur le livre ne faisant pas partie intégrante de lhistoire = titre, auteur, résumé, année de parution, … 611:07:59 Programmation Web

7 Structurer un document ? 711:07:59 Programmation Web Mettre en forme ? 1- Structurer (HTML) 2- Appliquer un style (CSS)

8 Structurer le document 811:07:59 Programmation Web Titre du document Titre de niveau 1 Titre de niveau 2 Titre de niveau 3 Paragraphe … Repérer les structures : Marquer leur début/fin Marquer leur début/fin Utilisation de balises Utilisation de balises

9 Appliquer une feuille de style 911:07:59 Programmation Web Style : Police de base : 8pt Titre de niveau 1 Bleu, majusculesBleu, majuscules Bords haut et basBords haut et basParagraphes JustifierJustifier Style : Titre de niveau 1 RougeRougeParagraphes JustifierJustifier 1 ère lettre paragraphe Gros, gris, italiqueGros, gris, italique

10 1011:07:59 Les grandes lignes Texte ASCII 7 bits (alphabet non accentué + quelques symboles) Texte ASCII 7 bits (alphabet non accentué + quelques symboles) Retour à la ligne non structurant : non mis en forme Retour à la ligne non structurant : non mis en forme Espaces (sens large) consécutifs = UN espace Espaces (sens large) consécutifs = UN espace Caractères accentués : représentation spécifique Caractères accentués : représentation spécifique Symboles : représentation spécifique Symboles : représentation spécifique Balises = structure, pas (plus) mise en forme Balises = structure, pas (plus) mise en forme Mise en forme : feuille de style CSS Mise en forme : feuille de style CSS Commentaires : Commentaires : Programmation Web

11 1111:07:59 Bref historique des fonctionnalités HTML2.0HTML3.2HTML4.0HTML4.01 Structuration du document OUIOUIOUIOUI Mise en forme dans les balises OUIOUINONNON Feuilles de style CSS NONNONOUIOUI Feuilles de style CSS2 NONNONNONOUI Interactivité JavaScript NONNONOUIOUI Séparation du fond et de la forme Programmation Web

12 1211:07:59 Balises (tags, marqueurs) HTML Texte entouré par (chevrons) Texte entouré par (chevrons) Balises insensibles à la casse : Balises insensibles à la casse : Ouvrante : Ouvrante : Fermante : (éventuellement optionnelle) Fermante : (éventuellement optionnelle) Non visibles dans le rendu du navigateur Non visibles dans le rendu du navigateur attributs/options : attributs/options : Équivalent mais XHTML minuscules Encadrement d'un bloc Programmation Web

13 1311:07:59 Utilisation des balises Utilisation CORRECTE Utilisation CORRECTE Texte Texte Texte Texte Texte Texte Utilisation INCORRECTE Utilisation INCORRECTE Texte Texte Texte Texte Texte Texte Jamais de chevauchement (pile détats) Jamais de chevauchement (pile détats) Programmation Web

14 1411:07:59 Outils de validation Les spécifications Les spécifications HTML 4.01 : HTML 4.01 : CSS 2.1 : CSS 2.1 : Validation HTML Validation HTML Validateur en ligne : Validateur en ligne : Validateur sur intranet : Validateur sur intranet : Validation CSS : Validation CSS : Validateur en ligne : Validateur en ligne : Validateur sur intranet : Validateur sur intranet : Programmation Web

15 1511:07:59 Document HTML Document texte ASCII.htm ou.html Document texte ASCII.htm ou.html Structure de base : Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document

16 1611:07:59 Document HTML Document texte ASCII.htm ou.html Document texte ASCII.htm ou.html Structure de base : Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document

17 1711:07:59 Structure dun document HTML SGML SGML Standard Generalized Markup Language Standard Generalized Markup Language Permet de décrire les langages à balises Permet de décrire les langages à balises DTD DTD Document Type Definition Document Type Definition Description dun langage particulier Description dun langage particulier Permet à lagent utilisateur dinterpréter correctement le document Permet à lagent utilisateur dinterpréter correctement le document Programmation Web

18 1811:07:59 DTD HTML 4.01 HTML 4.01 Strict HTML 4.01 Strict HTML 4.01 Transitional HTML 4.01 Transitional HTML 4.01 Frameset HTML 4.01 Frameset Programmation Web

19 1911:07:59 Document HTML Document texte ASCII.htm ou.html Document texte ASCII.htm ou.html Structure de base : Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document Programmation Web

20 2011:07:59 Structure et contenu de len-tête Informations sur le document Informations sur le document Titre du document (obligatoire) Titre du document (obligatoire) … … Méta données Méta données Autres informations Autres informations Styles Styles Scripts Scripts Programmation Web

21 2111:07:59 Table ASCII Car Code (nul) 0 (soh) 1 (stx) 2 (etx) 3 (eot) 4 (enq) 5 (ack) 6 (bel) 7 (bs) 8 (ht) 9 (nl) 10 (vt) 11 (np) 12 (cr) 13 (so) 14 (si) 15 (dle) 16 (dc1) 17 (dc2) 18 Car Code (dc3) 19 (dc4) 20 (nak) 21 (syn) 22 (etb) 23 (can) 24 (em) 25 (sub) 26 (esc) 27 (fs) 28 (gs) 29 (rs) 30 (us) 31 (sp) 32 ! 33 " 34 # 35 $ 36 % 37 Car Code & 38 ' 39 ( 40 ) 41 * , / Car Code 9 57 : 58 ; 59 < 60 = 61 > 62 ? 64 A 65 B 66 C 67 D 68 E 69 F 70 G 71 H 72 I 73 J 74 K 75 Car Code L 76 M 77 N 78 O 79 P 80 Q 81 R 82 S 83 T 84 U 85 V 86 W 87 X 88 Y 89 Z 90 [ 91 \ 92 ] 93 ^ 94 Car Code _ 95 ` 96 a 97 b 98 c 99 d 100 e 101 f 102 g 103 h 104 i 105 j 106 k 107 l 108 m 109 n 110 o 111 p 112 q 113 Car Code r 114 s 115 t 116 u 117 v 118 w 119 x 120 y 121 z 122 { 123 | 124 } 125 ~ 126 (del) 127 Programmation Web

22 2211:07:59 Entités HTML (dans ) Représentation spécifique des Représentation spécifique des Symboles Symboles Caractères accentués Caractères accentués Absents de la table ASCII donc composition Absents de la table ASCII donc composition Forme générale des entités HTML Forme générale des entités HTML &code; &code; Quelques exemples Quelques exemples é"é" é é"é" é " " espace insécable " " espace insécable <"<" < <"<" < &"&" & &"&" & Programmation Web

23 Entités HTML : lisibilité des sources Exemple de texte français : Exemple de texte français : Cet été était décevant à cause de la météo exécrable de cette contrée éloignée. Le même texte utilisant les entités HTML : Le même texte utilisant les entités HTML : Cet été était décevant à cause de la météo exécrable de cette contrée éloignée 2311:07:59 Programmation Web

24 2411:07:59 Tables de caractères Définir la table des caractères de la page HTML Définir la table des caractères de la page HTML Si non ASCII Si non ASCII Sera utilisée par lagent utilisateur (si disponible…) Sera utilisée par lagent utilisateur (si disponible…) Permet de limiter les entités HTML (source : lisibilité) Permet de limiter les entités HTML (source : lisibilité) Balise META à placer dans Balise META à placer dans Table de caractères "Europe de l'Ouest« (latin1) Table de caractères "Europe de l'Ouest« (latin1) Table de caractères UNICODE Table de caractères UNICODE Programmation Web

25 2511:07:59 Document HTML Document texte ASCII.htm ou.html Document texte ASCII.htm ou.html Structure de base : Structure de base : 1. Information sur la version de HTML utilisée 2. En-tête déclaratif 3. Corps, contenu du document Programmation Web

26 2611:07:59 Utilisation et utilité des balises dans Utilisation et utilité des balises dans Initialement : mise en page du document Initialement : mise en page du document Police, couleur, taille, alignement du texte, … Police, couleur, taille, alignement du texte, … Maintenant : structuration logique du document Maintenant : structuration logique du document Titres de différents niveaux Titres de différents niveaux Paragraphes, citation, exemple, code, … Paragraphes, citation, exemple, code, … Listes Listes Tableaux, … Tableaux, … Si le document est correctement structuré, chaque élément structurel pourra est mis en forme via une feuille de style CSS Si le document est correctement structuré, chaque élément structurel pourra est mis en forme via une feuille de style CSS Programmation Web

27 2711:07:59 Présentation de la source HTML texte texte texte texte textetextetextetextetexte textetextetextetextetexte textetextetexte textetextetexte texte texte texte texte textetextetextetextetext e textetextetexte texte texte texte textetextetextetextetext e textetextetexte texte Équivalentes ? Correctes ? Lisibles ? Identiques ? Programmation Web

28 2811:07:59 Mise en page Structuration Titres (6 niveaux de hiérarchie) : Titres (6 niveaux de hiérarchie) : … … Paragraphes Paragraphes … [ ] … [ ] Saut de ligne : Saut de ligne : Programmation Web

29 2911:07:59 Mise en page Structuration Ligne de séparation horizontale : Ligne de séparation horizontale : Texte préformaté (brut) : Texte préformaté (brut) : … … Retours à la ligne et espaces multiples apparaissent Retours à la ligne et espaces multiples apparaissent Groupe « mode en ligne » structuration pure Groupe « mode en ligne » structuration pure … … Groupe « mode bloc » structuration pure Groupe « mode bloc » structuration pure … … Programmation Web

30 3011:07:59 Mise en forme Structuration Styles physiques logiques Styles physiques logiques Gras : … Gras : … Italique : … Italique : … Souligné : … Souligné : … Styles logiques Styles logiques Citation : … Citation : … Code : … Code : … Mise en valeur : … Mise en valeur : … Exemple : … Exemple : … … Programmation Web

31 3111:07:59 Liste de définitions Liste : … Liste : … Élément : … [ ] Élément : … [ ] Définition : … [ ] Définition : … [ ] Ours Ours Les ours sont de grands mammifères plantigrades de l'ordre des Carnivores, famille des Ursidés, sous-famille des Ursinés. Les ours sont de grands mammifères plantigrades de l'ordre des Carnivores, famille des Ursidés, sous-famille des Ursinés. Chèvre Chèvre La chèvre est un mammifère herbivore et ruminant, appartenant à la famille des bovidés, sous-famille des caprinés ou caprins. La chèvre est un mammifère herbivore et ruminant, appartenant à la famille des bovidés, sous-famille des caprinés ou caprins. Programmation Web

32 3211:07:59 Liste non numérotée Liste : … Liste : … Élément : … [ ] Élément : … [ ] Liste des courses : Beurre Beurre Sucre Sucre Farine Farine Oeufs Oeufs Confiture Confiture Programmation Web

33 3311:07:59 Liste numérotée Liste : … Liste : … Élément : … [ ] Élément : … [ ] Liste des courses : Beurre Beurre Sucre Sucre Farine Farine Oeufs Oeufs Confiture Confiture Programmation Web

34 3411:07:59 Tableaux Tableau : … Tableau : … Ligne : … [ ] Ligne : … [ ] Cellule : … [ ] Cellule : … [ ] Cellule den-tête : … [ ] Cellule den-tête : … [ ] Colonnes = nombre maxi de par Colonnes = nombre maxi de par Équivalent au précédent Programmation Web

35 3511:07:59 Tableaux « avancés » Extension de cellule sur C colonnes : Extension de cellule sur C colonnes : Programmation Web

36 3611:07:59 Tableaux « avancés » Extension de cellule sur L lignes : Extension de cellule sur L lignes : Programmation Web

37 3711:07:59 Tableaux « avancés » Groupe de lignes den-tête Groupe de lignes den-tête … [ ] … [ ] Groupe de lignes de corps (plusieurs groupes) Groupe de lignes de corps (plusieurs groupes) … [ ] … [ ] Groupe de lignes de bas de tableau Groupe de lignes de bas de tableau … [ ] … [ ] Programmation Web

38 Eléments de regroupement Mécanisme générique de structuration du document Mécanisme générique de structuration du document Utilisation conjointe avec les feuilles de style Utilisation conjointe avec les feuilles de style Groupe en ligne Groupe en ligne … … Groupe en bloc Groupe en bloc … … 3811:07:59 Programmation Web

39 3911:07:59 Classe, identification et description Affecter une balise à une classe Affecter une balise à une classe Attribut class Attribut class Donner un identifiant à une balise Donner un identifiant à une balise Attribut id Attribut id Identifiant doit être unique (charge du concepteur) Identifiant doit être unique (charge du concepteur) Décrire un élément Décrire un élément Attribut title pour la plupart des éléments HTML Attribut title pour la plupart des éléments HTML Texte affiché sous forme dinfo-bulle (tooltip) Texte affiché sous forme dinfo-bulle (tooltip) Sous-groupe de l'ensemble des balises Sous-groupe de l'ensemble des balises Une balise repérée de façon unique

40 4011:07:59 Liens et ancres Base de la navigation hypertexte Base de la navigation hypertexte Lien (ancre source dun) : zone active cliquable Lien (ancre source dun) : zone active cliquable support du lien support du lien Support : texte, image, contenus entre et Support : texte, image, contenus entre et URL : késako ? URL : késako ? Ancre (nommée) : point cible Ancre (nommée) : point cible point dancrage point dancrage name= nom unique (à la charge du concepteur) name= nom unique (à la charge du concepteur) Comment cibler lancre dans un lien ? URL Comment cibler lancre dans un lien ? URL Programmation Web

41 4111:07:59 URL : Universal Resource Locator Décrire ladresse dune ressource Web Décrire ladresse dune ressource Web 1. Mécanisme daccès 2. Equipement hébergeant la ressource 3. La ressource et son chemin Casse Casse Encodage Encodage Programmation Web

42 4211:07:59 Marque de fragment Faire référence à un emplacement repéré dans une ressource Faire référence à un emplacement repéré dans une ressource Atteindre une ancre… Atteindre une ancre… txt txt …ou atteindre un élément identifié …ou atteindre un élément identifié txt txt URL se terminant par #nom_de_l_ancre URL se terminant par #nom_de_l_ancre intro/intro.html#fragment-uri intro/intro.html#fragment-uri Programmation Web

43 4311:07:59 URL relative Ne contient pas de mécanisme daccès Ne contient pas de mécanisme daccès Ne contient pas de nom de machine Ne contient pas de nom de machine Fait référence au document courant, à la machine courante Fait référence au document courant, à la machine courante Peut contenir un chemin relatif (.. ) Peut contenir un chemin relatif (.. ) Peut contenir une marque de fragment Peut contenir une marque de fragment Exemples Exemples"/accueil.html""../../image.jpg""#ancre1""../../accueil/accueil.html#ancre2" Programmation Web

44 Fenêtre cible dun lien Lien (ancre source dun) : zone active cliquable support support Les valeurs possibles de target sont : _blank une nouvelle fenêtre _blank une nouvelle fenêtre _parent la fenêtre parente _parent la fenêtre parente _self la fenêtre elle-même _self la fenêtre elle-même _top la fenêtre racine des fenêtre parentes _top la fenêtre racine des fenêtre parentes un_identificateur une fenêtre nommée un_identificateur une fenêtre nommée 4411:07:59 Programmation Web

45 Mise en ligne des pages perso Serveurs virtuels du Département Info Exemple : Enseignants ont des alias : Serveurs virtuels du Département Info Exemple : Enseignants ont des alias : Correspondance avec vos fichiers Correspondance avec vos fichiers 4511:07:59 Programmation Web $HOME/public_html/ progwebS1/html/index.php

46 Mise en place de vos pages perso Mécanisme daccès aux fichiers Mécanisme daccès aux fichiers Serveur Web lit le fichier et le transmet au navigateur Serveur Web lit le fichier et le transmet au navigateur Les droits sont à donner à apache/apache Les droits sont à donner à apache/apache Et quand lURL désigne un répertoire ? Et quand lURL désigne un répertoire ? Exemple : Exemple : Exemple : Exemple : Quel est le fichier demandé au serveur ? Quel est le fichier demandé au serveur ? A priori par défaut habituel sur apache A priori par défaut habituel sur apache HTML : index.html HTML : index.html PHP : index.php PHP : index.php 4611:07:59 Programmation Web

47 4711:07:59 Image Ajouter une image au sein du document Ajouter une image au sein du document src src URI permettant datteindre limage URI permettant datteindre limage width et height width et height permettent à lagent de prévoir un emplacement avant davoir analysé limage permettent à lagent de prévoir un emplacement avant davoir analysé limage permettent au concepteur de redimensionner limage permettent au concepteur de redimensionner limage alt alt Texte alternatif si limage est indisponible/corrompue Texte alternatif si limage est indisponible/corrompue Programmation Web

48 Importance de fixer la taille de limage Situation normale Situation normale 4811:07:59 Programmation Web

49 Importance de fixer la taille de limage Image absente SANS taille définie Image absente SANS taille définie 4911:07:59 Programmation Web

50 Importance de fixer la taille de limage Image absente / chargement AVEC taille définie Image absente / chargement AVEC taille définie 5011:07:59 Programmation Web

51 5111:07:59 Qu'est-ce qu'une image Description naïve : grille de carrés de couleur Description naïve : grille de carrés de couleur Pixel Programmation Web

52 5211:07:59 Images en niveaux de gris Images en 256 nuances de gris Images en 256 nuances de gris 1 pixel = 1 octet 1 pixel = 1 octet Valeur de l'octet = intensité lumineuse Valeur de l'octet = intensité lumineuse 0 = noir 0 = noir 255 = blanc 255 = blanc Programmation Web

53 5311:07:59 Représentation de la couleur Principe de la synthèse additive des couleurs Principe de la synthèse additive des couleurs En utilisant 3 couleurs, on peut les former toutes En utilisant 3 couleurs, on peut les former toutes Rouge, Vert, Bleu en quantité variable Rouge, Vert, Bleu en quantité variable Représentation informatique : quantité = entier Représentation informatique : quantité = entier Habituellement, 1 octet, soit 256 niveaux Habituellement, 1 octet, soit 256 niveaux Donc, 1 couleur = 3 octets (1 R, 1V, 1B) Donc, 1 couleur = 3 octets (1 R, 1V, 1B) Programmation Web

54 5411:07:59 Représentation de la couleur Images vraies couleurs : Images vraies couleurs : dites 24 bits (3×1octet = 3×8bits) dites 24 bits (3×1octet = 3×8bits) 16,7 millions de couleurs (256×256×256= ) 16,7 millions de couleurs (256×256×256= ) Chaque pixel = triplet (R,V,B) Chaque pixel = triplet (R,V,B) Images vraies couleurs + canal alpha : Images vraies couleurs + canal alpha : dites 32 bits, pixel = quadruplet (R,V,B,A) dites 32 bits, pixel = quadruplet (R,V,B,A) Images couleurs indexées : Images couleurs indexées : dites 8 bits (1 octet) dites 8 bits (1 octet) 2 à 256 couleurs 2 à 256 couleurs Table de 2 à 256 triplets (R,V,B) Table de 2 à 256 triplets (R,V,B) Chaque pixel = 1 index (octet) de la table de couleurs Chaque pixel = 1 index (octet) de la table de couleurs Programmation Web

55 5511:07:59 Images "vraies couleurs" ++= rougevertbleu Programmation Web

56 5611:07:59 Images couleurs indexées indexrougevertbleu indexrougevertbleu Programmation Web

57 5711:07:59 Format dimages pour le Web GIF (Compression sans perte) GIF (Compression sans perte) 2 à 256 couleurs 2 à 256 couleurs Animation possible Animation possible Transparence Transparence JPG (Compression avec perte paramétrable) JPG (Compression avec perte paramétrable) 16 millions de couleurs 16 millions de couleurs Taux de compression élevé Taux de compression élevé PNG (Compression sans perte) PNG (Compression sans perte) 2 à 256 couleurs ou 16 millions de couleurs 2 à 256 couleurs ou 16 millions de couleurs Canal alpha Canal alpha Format libre Format libre Textes, tracés, figures, images à contours précis Images naturelles : photographies Tout, à condition de bien choisir le nombre de couleurs Programmation Web

58 5811:07:59 Formats dimages pour le Web TIFF (image NON Web de référence) TIFF (image NON Web de référence) 192 Ko 256 px × 256 px × 3 octets = octets = 192 Koctets Programmation Web

59 5911:07:59 Formats dimages pour le Web GIF 256 couleurs GIF 256 couleurs 9,59 Ko 1:20 Programmation Web

60 6011:07:59 Formats dimages pour le Web GIF 64 couleurs GIF 64 couleurs 3,96 Ko 1:48 Programmation Web

61 6111:07:59 Formats dimages pour le Web JPEG qualité 100% JPEG qualité 100% 11,6 Ko 1:17 Programmation Web

62 6211:07:59 Formats dimages pour le Web JPEG qualité 50% JPEG qualité 50% 3,77 Ko 1:51 Programmation Web

63 6311:07:59 Formats dimages pour le Web JPEG qualité 5% JPEG qualité 5% 1,69 Ko 1:144 Programmation Web

64 6411:07:59 Formats dimages pour le Web PNG 16 millions de couleurs PNG 16 millions de couleurs 8,48 Ko 1:23 Programmation Web

65 6511:07:59 Formats dimages pour le Web : Bilan FormatCompression Effets visibles liés au format GIF 256 c. 1:20 Légère perte de couleurs GIF 64 c. 1:48 Perte de couleurs JPEG 100% 1:17 Léger flou JPEG 50% 1:51 Distorsions importantes JPEG 5% 1:144 Distorsions très importantes PNG 16M c. 1:23Aucun Programmation Web

66 6611:07:59 Images cliquables Carte de zones cliquables sur une image Carte de zones cliquables sur une image [ ] [ ] name= nom de la carte, repris dans usemap= name= nom de la carte, repris dans usemap= Programmation Web

67 6711:07:59 Images cliquables : formes de zones shape="forme" shape="forme" rect : rectangle rect : rectangle coords="coin_sup_gauche, coin_inf_droit" coords="coin_sup_gauche, coin_inf_droit" circle : cercle circle : cercle coords="centre, rayon" poly : polygone poly : polygone coords="point_1, point_2, point_3, …" coords="point_1, point_2, point_3, …" default : toute la zone default : toute la zone Coordonnées Coordonnées Coordonnées dun point dans lespace image (pixels) Coordonnées dun point dans lespace image (pixels) x y Programmation Web

68 6811:07:59 Images cliquables : exemple coords="200,65,240,150,190,150,200,170,65,240"> x y Exemple Programmation Web

69 6911:07:59 Cadres (frames) Déprécié mais intéressant ! Déprécié mais intéressant ! Diviser la fenêtre du navigateur en cadres Diviser la fenêtre du navigateur en cadres Utiliser la DTD HTML 4.01 Frameset Utiliser la DTD HTML 4.01 Frameset … … Liste : espacements des colonnes ou des lignes Liste : espacements des colonnes ou des lignes en pixels : 30, en % : 20%, ce quil reste : * en pixels : 30, en % : 20%, ce quil reste : * peut contenir peut contenir Programmation Web

70 7011:07:59 Cadres (frames) Comment définir ce qui doit être affiché dans les cadres ? Comment définir ce qui doit être affiché dans les cadres ? name= name= Nom du cadre / de la fenêtre Nom du cadre / de la fenêtre Utilisé pour quil soit la cible de liens : Utilisé pour quil soit la cible de liens : … … src= src= URL de la page à afficher dans le cadre URL de la page à afficher dans le cadre Programmation Web

71 7111:07:59 Cadres : support ? Si lagent ne supporte pas les cadres ? Si lagent ne supporte pas les cadres ? Les robots ne supportent pas les cadres Les robots ne supportent pas les cadres … … Ce qui sera affiché dans les résultats des moteurs de recherche Ce qui sera affiché dans les résultats des moteurs de recherche Programmation Web

72 7211:07:59 Cadres : exemple Cadre principal Cadre principal Texte pour les moteurs de recherche Texte pour les moteurs de recherche 2 colonnes 2 lignes Programmation Web

73 7311:07:59 Cadres : exemple 200px 30% Programmation Web

74 7411:07:59 Cadre en mode ligne (iframe) Permet de définir un cadre en mode ligne et dy charger un document Permet de définir un cadre en mode ligne et dy charger un document Balise : Balise :

';
Annonces Google