GTI525 Technologies de développement Internet

Dimension: px

Commencer à balayer dès la page:

Download "GTI525 Technologies de développement Internet"

Corentin Robichaud
il y a 8 ans
Total affichages :

1 GTI525 Technologies de développement Internet Langage de balisage hypertexte (HTML) GTI525, Été 2013

2 HTML de base Contenu Basé sur tutoriel Bonnes pratiques GTI525, Été

3 Pourquoi se soucier de HTML aujourd hui? Bien qu il existe de nombreux outils visuels permettant de développer des pages Web sans connaissance du HTML, bien le connaître est un atout important quand vient le temps de déverminer HTML éventuellement utile pour portion dynamique du cours Une page JSP est essentiellement du HTML avec quelques balises spécifiques à JSP GTI525, Été

4 HTML de base GTI525, Été 2013

5 Qu est-ce que le HTML? Définition 1 : Langage de balisage de texte qui permet la création de documents hypertextes affichables par un navigateur Web Note: le langage HTML est une application de la norme ISO-SGML (Standard Generalized Markup Language) et a été défini par le CERN (Centre européen de recherche nucléaire) 1: GTI525, Été

6 Un exemple simple <html> <head> <title>titre de la page</title> </head> <body> Bienvenue sur ma page! texte en gras </body> </html> GTI525, Été

7 Fichier HTML Extension.htm ou.html Contenu: texte ordinaire, éléments balisés Balises indiquent au navigateur comment afficher la page Structure (éléments) de base <!DOCTYPE html> (pour HTML 5) <html> <head> <title> <body> GTI525, Été

8 Délimitées par < et > Balises HTML Viennent habituellement par paire Balise d ouverture et balise de fermeture Une paire de balises et le contenu (ce qu il y a entre les deux balise) forment un élément HTML. Exemple : ceci est un paragraphe. Balises de base et de formatage GTI525, Été

9 Entités HTML Servent à afficher les caractères qui ont une signification particulière en HTML i.e. les caractères réservés Trois parties & (perluète, ou ampersand) (Nom d entité) ou (# et numéro d entité) ; Ex: pour afficher < utiliser soit < ou < Source: GTI525, Été

10 Hyperliens Via la balise «ancre» (anchor ) Deux utilisations principales Créer des hyperliens avec d autres documents Nommer des points spécifiques dans une page Afin de pouvoir y «sauter» via un hyperlien Forme de base <a href="url">texte à afficher</a> Exemples GTI525, Été

11 Cadres Servent à séparer la fenêtre du navigateur en plusieurs zones rectangulaires indépendantes Dans lesquelles on peut afficher différentes pages HTML Forme générale Balise <frameset> remplace <body> Contient des éléments <frame> ou <frameset> Balise <noframes> où l on indique information pour navigateurs qui ne supportent pas les cadres Exemples GTI525, Été

12 Tableaux Allons-y par l exemple GTI525, Été

13 Trois types Non numérotées Numérotées De définitions Exemples Listes GTI525, Été

14 Types de primitives Zone texte (text field) Mode ordinaire Mode «mot de passe» Mutlilignes Caché Case à cocher (checkbox) Formulaires Case d option (radio button) Bouton Générique «Submit» «Reset» Menu déroulant Navigation de fichier Exemples GTI525, Été

15 Bonnes pratiques associées au développement de pages HTML GTI525, Été 2013

16 Bonnes pratiques 1. Validez vos pages HTML 2. Créez des pages accessibles 3. Séparez contenu et présentation 4. Souci de la multiplication des plateformes 5. Facilitez la navigation 6. Besoin d être multilingue? 7. HTML = code source 8. Pages Web complexes: conception GTI525, Été

17 1 - Validation de HTML Pourquoi? La balise <DOCTYPE> est utile à ce niveau Validation du HTML Vérification des liens GTI525, Été

18 2 - Pages accessibles Pages pouvant être lues par des gens avec un handicap Balise <alt> sur les images Polices redimensionnables Évitez d utiliser les cadres Navigation alternative Respect des recommandations WCAG: Web Content Accessibility Guidelines GTI525, Été

19 3 - Séparation du contenu et de la présentation HTML: sert à définir la hiérarchie et la sémantique du document CSS: vient indiquer au navigateur comment le HTML devrait être affiché à l écran GTI525, Été

20 4 Multiplateforme Assurer une expérience équivalente pour les diverses plateformes Résolutions d écran Navigateurs Appareils mobiles GTI525, Été

21 5 - Navigabilité Permettez toujours à l utilisateur de trouver son chemin facilement Ne pas oublier les boutons Page Précédente et Page Suivante, qui peuvent avoir des comportements inattendus lors de flots complexes GTI525, Été

22 6 - Questions de langues Pages multilingues: options L utilisation des server-side includes est ici recommandée afin de ne pas dupliquer les pages Développement par canevas Types d encodage GTI525, Été

23 7 Le HTML est du code source Maintenez vos fichiers HTML sous gestion de versions (CVS, ) Favorisez la réutilisation de code Développez avec un souci de maintenance GTI525, Été

24 9 Conception de pages Web complexes Traitez les pages Web complexes comme tout logiciel complexe Conception avant le développement Outils, notations, diagrammes Des livres sur le sujet existent J. Connalen (2000), Building Web Applications with UML, Addison Wesley, 320 pages. Concevoir les applications avec une bonne compréhension des mécanismes du Web GTI525, Été

25 HTML 5 Nouveau standard pour remplacer la version 4.01 datant de 1999 Objectifs: Meilleure structure de document Ajout de capacités graphiques via Javascript Amélioration de la gestion des formulaires Réduction de la dépendance sur les plugins pour le multimédia (ex. Flash) GTI525, Été

26 HTML 5 Impacts particuliers pour les applications Web d entreprise Entreposage de fichiers sur le côté client (plus de détails lors du cours sur la gestion de session) Infographie 2D programmatique en HTML et Javascript, sans plugiciel Amélioration de la sémantique des documents Cependant, HTML 5 n est pas complètement supporté par plusieurs navigateurs GTI525, Été

27 Références Guide complet sur plusieurs aspects importants de conception de pages Web Compatibilité avec divers navigateurs Accessibilité Formats d images Multilinguisme GTI525, Été

Documents pareils

Les sites Internet dynamiques. contact : Patrick VINCENT [email protected]

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT [email protected] Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et