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

Xavier Tannier Introduction.

Présentations similaires


Présentation au sujet: "Xavier Tannier Introduction."— Transcription de la présentation:

1 Xavier Tannier Introduction

2 Programmation Web XHTML Xavier Tannier Internet et le Web Internet : un réseau mondial d'ordinateurs. Différentes applications : – Courrier électronique – Web – Échange de fichiers (FTP, peer-to-peer) – Console distante (telnet, VNC) – Vidéoconférence, e-commerce, télétravail, chat, collecticiel,… Le Web : un système hypertexte public fonctionnant sur Internet et permettant de consulter, avec un navigateur, des pages mises en ligne dans des sites. 2

3 Programmation Web XHTML Xavier Tannier Architecture du Web 3 Le clientLe serveur Le réseau (navigateur)(HTTP) Protocole TCP/IP (voir vos cours de réseaux) URL (+ paramètres) Type MIME + fichier

4 Programmation Web XHTML Xavier Tannier URL et MIME URL : Uniform Resource Locator – Identifie sur le Web un document ou un fragment MIME : Multipurpose Internet Mail Extensions – Type des documents transférés par le protocole HTTP (différent de lextention !) – La navigateur décide ainsi comment afficher le fichier – text/html, text/plain, application/pdf, application/zip, image/jpeg, video/mpeg, audio/x-wav, etc. 4 protocole machine répertoire fichier fragment (http, https, ftp, news, mailto, telnet...)

5 Programmation Web XHTML Xavier Tannier Navigateurs Navigateurs graphiques (IE, Firefox, Opera, Konqueror, Safari...) Navigateurs textuels (links, linx...) Navigateurs auditifs Robots 5 Pour le projet Les projets devront être testés sur les 2 ou 3 navigateurs les plus courants (et sur Linux + Windows) L'accessibilité sera un critère important

6 Xavier Tannier eXtended HyperText Markup Language (XHTML)

7 Programmation Web XHTML Xavier Tannier (X)HTML (eXtended) HyperText Markup Language Un langage à balises pour structurer (et dans HTML pour mettre en forme) les documents Format ouvert, indépendant du logiciel et du matériel XHTML : – Successeur du HTML – Conforme aux normes XML (eXtended Markup Language) – Développé par le W3C (World Wide Web Consortium) 7 Pour le projet XHTML Tous les codes seront vérifiés par des validateurs

8 Programmation Web XHTML Xavier Tannier Lessentiel du langage XML (1/3) 8 article dateauteursectionbibliographie :32:27 Dupont et Dupond par … … bib … …... texte... … Chaque nœud de l'arbre est un élément Un élément peut avoir des attributs Les feuilles de l'arbre peuvent être des éléments textuels Un document XML = un arbre étiqueté et ordonné

9 Programmation Web XHTML Xavier Tannier Lessentiel du langage XML (2/3) Vocabulaire – Racine = document = arbre – Nœud = élément (entouré par des balises) – Balise de début ( ), balise de fin ( ), balise délément vide ( ) – Attribut : nom="valeur" dans la balise de début – Prologue : version de XML et type du document (ex : XHTML) 9

10 Programmation Web XHTML Xavier Tannier Lessentiel du langage XML (3/3) La structure des documents XML est imposée par une DTD ou un schéma XML Pour analyser des documents XML, on utilise deux méthodes : – DOM : construction de l'arbre en mémoire (puissant mais lent) – SAX : parcours linéaire du fichier (limité mais rapide) – Les analyseurs XML implémentent les API DOM ou SAX Un élément est défini de façon unique par son chemin XPath : /article[1]/section[2]/par[5] 10

11 Programmation Web Xavier Tannier HTML Structure dun document XHTML 11 Attributs de langue (redondant !) Version de XHTML utilisée (pour les validateurs notamment)

12 Programmation Web Xavier Tannier HTML Entêtes XHTML 12 Cours de Programmation Web...

13 Programmation Web Xavier Tannier HTML Les titres de section (h1-h6) 13 Cours de Programmation Web Introduction (X)HTML Les bases Rappels de XML Les balises Pour l'instant, c'est le navigateur qui décide de la forme...

14 Programmation Web Xavier Tannier HTML Emphases et compagnie 14 Cours de Programmation Web Introduction XHTML est le successeur du HTML. Il respecte le standard XML Voilà ! Pour l'instant, c'est le navigateur qui décide de la forme...

15 Programmation Web Xavier Tannier HTML Listes non ordonnées 15 Cours de Programmation Web Notions à connaître Les balises : de titre d'emphase de listes : ordonnées non ordonnées de définition En XHTML on ferme toutes les balises !

16 Programmation Web Xavier Tannier HTML Listes ordonnées 16 Cours de Programmation Web Notions à connaître Les cascades CSS, avec : le style de l'auteur le style de l'utilisateur le style du navigateur Attributs de ol : type (valeurs "1", "a", "A", "i" ou "I") start (numéro de démarrage)

17 Programmation Web Xavier Tannier HTML Listes de définitions 17 Cours de Programmation Web Notions à connaître XML eXtensible Markup Language XHTML eXtended HTML CSS Cascading Style Sheets

18 Programmation Web Xavier Tannier HTML Images 18 Cours de Programmation Web Images Attribut alt indispensable, pour remplacer l'image lorsque le texte ne s'affiche pas ou pour les lecteurs (humains ou machines) n'ayant pas accès aux images. Format d'images possibles : jpeg (photos) gif (animations) png (transparence) infobulle

19 Programmation Web Xavier Tannier HTML Liens 19 Cours de Programmation Web Liens utiles (avec une ancre) Le cours de BD (lien relatif) Le W3C (URL absolue) Aller en bas (ancre) Vous êtes en bas Retour vers l'ancre des liens

20 Programmation Web Xavier Tannier HTML Tableaux 20 Cours de Programmation Web Tableau Comparaison XHTML / HTML XHTML HTML forme non oui structure oui <br> non oui <hr> En trichant ! (feuille de style) légende ligne cellule d'entête cellule de donnée cellules multi-colonnes et multi-lignes

21 Xavier Tannier Les formulaires XHTML

22 Programmation Web Xavier Tannier HTML Les formulaires 22 get post application/x-www-form-urlencoded multipart/form-data text/plain URL du script auquel sera soumis le formulaire (on verra plus tard...) valeur par défaut

23 Programmation Web Xavier Tannier HTML Les ensembles de champs 23 Si les champs de formulaires sont au milieu d'un texte Pour regrouper des champs de formulaire ayant une sémantique proche Sinon En XHTML, pas de champs de formulaire "en vrac"

24 Programmation Web Xavier Tannier HTML Les types de champs 24 input type = " " label for textarea namecolsrows texthidden password checkboxradio file submit reset imagebutton

25 Programmation Web Xavier Tannier HTML Étiquette, saisie de texte 25 Identité Nom Prénom Mot de passe Sans feuille de style... Optionnel. Un clic sur le label sélectionne le champ de saisie

26 Programmation Web Xavier Tannier HTML Saisie multiligne 26 Description Commentaire Pas de commentaire... Texte par défaut

27 Programmation Web Xavier Tannier HTML Champ caché 27 – Permet de masquer des champs pour le client tout en envoyant leur contenu avec le formulaire – Précise des informations name/value – Attention, à utiliser pour "masquer", pas pour "cacher" ! Le client peut éditer la page à la main pour voir et changer la valeur de ces champs !

28 Programmation Web Xavier Tannier HTML Choix multiples (1/2) 28 Décochez cette case si vous n'avez pas de télé Paiement : Par carte Par chèque Optionnel mais très conseillé pour l'accessibilité

29 Programmation Web Xavier Tannier HTML Choix multiples (2/2) 29 Votre âge : Moins de 20 ans 21 à 35 ans 36 à 50 ans Plus de 51 ans

30 Programmation Web Xavier Tannier HTML Fichier joint 30 Fichier joint : type MIME (optionnel) : text/plain text/html image/gif video/*...

31 Programmation Web Xavier Tannier HTML Bouton 31 Décochez cette case si vous n'avez pas de télé Même comportement type button : pas d'action, seulement du javascript. À éviter ! (accessibilité)

32 Programmation Web XHTML Xavier Tannier Et lavenir ? HTML 5 HTML 5 : la prochaine révision du langage par le W3C Vision document complétée par une vision "application" Suppression des balises de forme Plus de balises de structure – header – article – footer Ajout de balises d'API : – canvas – audio – video – draggable –... 32

33 Programmation Web XHTML Xavier Tannier Références Spécification de XHTML Spécification de XHTML Spécification de XML Spécification de HTML HTML et XHTML : La Référence, OReilly 33


Télécharger ppt "Xavier Tannier Introduction."

Présentations similaires


Annonces Google