GTI525 Technologies de développement Internet Langage de balisage hypertexte (HTML) GTI525, Été 2013
HTML de base Contenu Basé sur tutoriel http://www.w3schools.com/html/default.asp Bonnes pratiques GTI525, Été 2013 2
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é 2013 3
HTML de base GTI525, Été 2013
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: http://granddictionnaire.com GTI525, Été 2013 5
Un exemple simple <html> <head> <title>titre de la page</title> </head> <body> Bienvenue sur ma page! <br /> <b>texte en gras</b> </body> </html> GTI525, Été 2013 6
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é 2013 7
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 : <p>ceci est un paragraphe.</p> Balises de base et de formatage http://www.w3schools.com/html/html_primary.asp http://www.w3schools.com/html/html_formatting.asp GTI525, Été 2013 8
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: http://www.w3schools.com/html/html_entities.asp GTI525, Été 2013 9
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 http://www.w3schools.com/html/html_links.asp GTI525, Été 2013 10
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 http://www.w3schools.com/html/html_frames.asp GTI525, Été 2013 11
Tableaux Allons-y par l exemple http://www.w3schools.com/html/html_tables.asp GTI525, Été 2013 12
Trois types Non numérotées Numérotées De définitions Exemples Listes http://www.w3schools.com/html/html_lists.asp GTI525, Été 2013 13
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 http://www.w3schools.com/html/html_forms.asp GTI525, Été 2013 14
Bonnes pratiques associées au développement de pages HTML GTI525, Été 2013
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é 2013 16
1 - Validation de HTML Pourquoi? La balise <DOCTYPE> est utile à ce niveau http://www.htmlhelp.com/tools/validator/doctype.html http://www.w3schools.com/tags/tag_doctype.asp Validation du HTML http://validator.w3.org/ Vérification des liens http://validator.w3.org/checklink GTI525, Été 2013 17
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 http://www.w3.org/wai/intro/wcag.php GTI525, Été 2013 18
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é 2013 19
4 Multiplateforme Assurer une expérience équivalente pour les diverses plateformes Résolutions d écran Navigateurs Appareils mobiles http://www.w3.org/2007/02/mwbp_flip_cards.html.fr GTI525, Été 2013 20
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é 2013 21
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é 2013 22
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é 2013 23
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é 2013 24
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é 2013 25
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é 2013 26
Références http://www.w3schools.com/html/default.asp http://www.anybrowser.org/campaign/ Guide complet sur plusieurs aspects importants de conception de pages Web Compatibilité avec divers navigateurs Accessibilité Formats d images Multilinguisme GTI525, Été 2013 27