Programmation Web - HTML

Programmation Web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2015-2016 http://liris.cnrs.fr/fabien.duchateau/ens/lif4/ 1/74

Introduction De nombreux sites Web (e-commerce, réservations de billets, etc.) ont une (ou plusieurs) BD pour gérer leurs données http://fr.wikipedia.org/wiki/programmation_web 2/74

Pages Web statiques L utilisateurice demande l accès à une page Web depuis son navigateur URL tapée, clic sur un lien, utilisation d un signet, etc. Le navigateur envoie une demande à un serveur Web Le serveur Web lit le fichier demandé sur le disque dur Le serveur Web envoie le contenu du fichier au navigateur Le navigateur affiche le contenu de la page pour l affichage, il peut également demander le contenu d autres fichiers au serveur (e.g., images) 3/74

Pages Web statiques (2) Inconvénient des pages statiques? http://fr.html.net/ 4/74

Pages Web statiques (2) Inconvénient des pages statiques? Pour changer le contenu, il faut éditer des fichiers http://fr.html.net/ 4/74

Pages Web dynamiques Idée : générer le contenu de la page au moment où elle est demandée, en fonction : Du contenu d une base de données De paramètres fournis avec la demande (e.g., formulaires) http://fr.html.net/ 5/74

Pages Web dynamiques (2) L utilisateurice demande l accès à une page Web depuis son navigateur Le navigateur envoie une demande au serveur web comprenant : le nom de la page, qui correspond en fait à un programme éventuellement un ensemble de paramètres Le serveur web va chercher sur le disque le code source du programme et l exécute : en utilisant les paramètres transmis avec la demande du navigateur en récupérant des données dans une BD ou sur le disque Durant l exécution, le programme génère un contenu HTML Le contenu HTML est envoyé au navigateur Le navigateur affiche le résultat 6/74

Quelques langages de programmation Web Langages utilisés : Pour la structure et le contenu des pages : HTML, XML Pour la présentation (mise en forme et en page) : CSS Pour le comportement (interactions, vérifications) : Javascript, AJAX 7/74

Quelques langages de programmation Web (2) Pour des animations : Flash (à éviter) Pour générer le contenu des pages : récupérer et traiter des données d une BD fabriquer un document (en général un document HTML) PHP, Perl, Python, ASP, Java,... Pour interroger une base de données : requêtes SQL, XPath, XQuery, SPARQL, etc. Dans cette UE : introduction à HTML, CSS et PHP (et SQL) 8/74

Quelques outils Nombreux outils pour aider en programmation Web : Éditeurs textuels (Emacs, BlueFish,...) ou WYSIWYG (Dreamweaver, NVU,...) CMS pour Content Management System (Drupal, Joomla, Spip, Wordpress,...) Framework (Symfony, Laravel, Hibernate,...) http://fr.wikipedia.org/wiki/%c3%89diteur_html http://fr.wikipedia.org/wiki/wysiwyg http://fr.wikipedia.org/wiki/syst%c3%a8me_de_gestion_de_contenu http://fr.wikipedia.org/wiki/liste_de_frameworks_php 9/74

Plan Syntaxe de base du HTML Formulaires Balises structurantes Architecture d un site Web 10/74

Généralités HTML pour HyperText Markup Language : Langage de balisage (structure + contenu) Origine : 1989-1990 Toujours en développement (HTML5) Extension de fichiers :.html Standard W3C depuis 1996 Fichier HTML : Fichier texte contenant des informations de structuration C est le navigateur qui lit le fichier et interprète les balises pour faire l affichage http://fr.wikipedia.org/wiki/hypertext_markup_language http://fr.wikipedia.org/wiki/langage_de_balisage http://www.w3.org/tr/html4/ 11/74

Principe des balises La structure est indiquée à l aide de balises : Le nom de la balise indique le type d élément que l on ajoute (e.g., une image, un titre, un menu) Il existe des balises en paires (une ouvrante, une fermante avec slash) <balise> du texte ou autre </balise> Il existe des balises orphelines (une ouvrante seulement, avec recommandation de mettre le slash fermant) <balise /> 12/74

Principe des balises (2) Une balise ouvrante peut contenir des attributs de la forme nom="valeur" : Les attributs permettent de préciser des informations concernant la mise en forme, propriétés de la balise, etc. <balise nom-att1="val1" nom-att2="val2">...</balise> Les balises peuvent être imbriquées (sans s entremêler) : <balise1> <balise2 /> <balise3> </balise3> </balise1> 13/74

Structure d une page HTML <!DOCTYPE html> <html lang="fr"> <head> <! métadonnées, scripts, etc. >... </head> <body> Partie affichée dans le navigateur... </body> </html> 14/74

Définition du type document Balise doctype spécifie le type de document : Plusieurs versions (et variantes) de la norme HTML Il faut donc préciser laquelle on utilise (et s y tenir) Obligatoire si l on veut faire valider son document par un validateur Balise doctype simplifiée depuis HTML5 : <!DOCTYPE html> Balise html pour le début du document : Attribut lang pour la langue (synthèse vocale) 15/74

En-tête (partie <head>) Partie head du fichier HTML pour : Des métadonnées sur le document, utilisables par les navigateurs ou moteurs de recherche : Syntaxe d une métadonnée : <meta name="propriété" content="attributs"> Exemples de métadonnées : la balise title, obligatoire (dans la norme) des mots-clés l encodage du document (important pour afficher correctement les caractères accentués ou spéciaux) le comportement des robots La définition de scripts (qui seront utilisés dans la partie body) Un lien vers une feuille de style ou des scripts externes 16/74

En-tête (2) Exemple de fichier en-tête <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>titre de la page</title> <link rel="stylesheet" type="text/css" href="includes/styles.css"> <meta name="keywords" content="cours HTML, HTML5, site web"> </head> <body> Partie affichée dans le navigateur </body> </html> Quatre métadonnées dans la partie head : une spécification du codage, le titre de la page, un lien vers un fichier de style CSS et des mots-clés décrivant le document 17/74

Contenu (partie <body>) Le contenu est placé entre les balises <body> et </body> Le contenu est structuré par des balises de mise en page (paragraphes, listes, etc.) 18/74

Paragraphes Syntaxe du saut de ligne : une première ligne <br> une seconde ligne Syntaxe d un paragraphe : <p> un texte qui s étend <br> sur plusieurs lignes<br> et qui forme un paragraphe </p> Le texte entre les balises <p> et </p> forme un paragraphe (saut de ligne avant et après le paragraphe) 19/74

Texte Balises pour signaler une partie de texte importante : un texte avec des <mark>mots très importants</mark> un texte avec un mot <strong>important</strong> dedans un texte avec des <em>mots moins importants</em> Ces balises sont purement sémantiques : c est le navigateur qui décide de leur appliquer un style (gras, italique), ce qui est personnalisable avec les CSS 20/74

Titres Syntaxe des différents types de titres : <h1>un premier titre</h1> c est un titre très important (traduit par le navigateur par un affichage plus gros, en gras) <h2>un second titre </h2> c est un titre important (traduit par le navigateur par un affichage un peu moins gros)... <h6>un sixième titre </h6> c est la balise pour un titre peu important (dernier niveau) Même remarque, balises uniquement sémantiques! 21/74

Listes Syntaxe d une liste sans numérotation : <ul> <li>entrée 1</li> <li>entrée 2</li> <li>entrée 3</li> <li>...</li> </ul> Syntaxe d une liste avec numérotation : <ol> <li>entrée 1</li> <li>entrée 2</li> <li>entrée 3</li> <li>...</li> </ol> 22/74

Tableaux <table> <tr> <th>colonne 1</th> <th>colonne 2</th> </tr> <tr> <td>case 1</td> <td>case 2</td> </tr> <tr> <td>case 3</td> <td>case 4</td> </tr> </table> La balise <tr> permet de créer une nouvelle ligne, <th> une case d entête et <td> une case de contenu http://fr.wikibooks.org/wiki/le_langage_html/tableaux 23/74

Liens hypertextes Syntaxe d un lien hypertexte : <a href="adresse_web">zone cliquable</a> Lorsque l on clique sur zone cliquable, on va à l adresse (URL) indiquée par l attribut href Ce qui est entre les balises <a> et </a> (zone cliquable) devient un lien cliquable Autres attributs de la balise <a> : target="cible" pour ouvrir l URL dans cible (target="_blank" pour une nouvelle fenêtre) name="mon_ancre" pour définir une ancre mon_ancre (endroit précis d une page) 24/74

Liens hypertextes (2) Caractéristiques du lien : Absolu : adresse_web a un chemin complet (obligatoire pour un lien situé sur un autre site Web ou avec protocole différent) Relatif : adresse_web a un chemin défini par rapport à la page actuelle (préférable sur son site) 25/74

Liens hypertextes (2) Exemples de lien <a href="documents/un_doc.pdf">un lien interne, avec chemin relatif</a> <a href="http ://fr.wikipedia.org/">un lien externe, avec chemin absolu</a> <a href="http ://fr.wikipedia.org/" target="_blank">un lien externe, avec chemin absolu, qui s ouvre dans une nouvelle fenêtre</a> <a href="page.html#section3">un lien interne, pointant sur l ancre section3 de la page page.html</a> 26/74

Images Syntaxe d insertion d une image : <img src="url_image" alt="texte alternatif" /> Insertion de l image située à l adresse url_image Pas de balise fermante pour <img> Attribut alt="texte alternatif" conseillé (pour des raisons d accessibilité) Balises <figure> et <figcaption> pour ajouter une légende http://fr.wikibooks.org/wiki/le_langage_html/images http://vidberg.blog.lemonde.fr/ 27/74

Mise en forme du texte Il existe des balises <u>, <b>, <i>, <big>, etc. <b><i>un texte souligné et gras</i></b> 28/74

Mise en forme du texte Il existe des balises <u>, <b>, <i>, <big>, etc. <b><i>un texte souligné et gras</i></b> Elles sont obsolètes, il ne faut pas les utiliser! La mise en forme sera réalisée avec les CSS 28/74

Bonnes pratiques Les navigateurs sont assez tolérants aux erreurs de programmation en HTML Aérer le code (mise à jour plus facile soutenance de projet) Commenter le code, avec les balises <! > <! ceci est un commentaire > Balises en minuscules Penser à l accessibilité (e.g., attributs alt) Éviter les balises spécifiques à un navigateur Valider son fichier HTML avec un validateur http://validator.w3.org/ 29/74

En résumé HTML = langage de balises, utilisé pour le contenu et la structure Il existe d autres balises pour le multimédia, les cadres, applets, etc. (> 100 balises et > 200 attributs sous HTML5) Démo avec demo1.html (code source sur la page du LIF4) 30/74

Généralités Objectifs des formulaires Web : Permettre à l utilisateurice de saisir des paramètres Envoyer les valeurs saisies pour chaque paramètre au serveur Accéder à une page dynamique générée par le serveur selon les valeurs des paramètres Quels moyens? Différents composants (champs textuels, listes déroulantes, cases à cocher,...) À chaque composant correspond un paramètre 32/74

Généralités (2) Des formulaires bien connus pour générer des pages dynamiques... 33/74

Formulaires : balise principale Syntaxe générale d un formulaire : <form action="url" method="typem" name="nomf"> contenu_formulaire </form> Formulaire (sans composant) qui a pour attributs : un nom, ici nomf (attribut optionnel) une méthode de transmission des paramètres, ici typem une action sous forme d URL vers le fichier qui sera exécuté après soumission du formulaire, ici url 34/74

Formulaires : balise principale (2) Quelques détails sur le formulaire : Valeurs pour l attribut method (méthode de transmission des paramètres) : POST : données dans le corps de la requête HTTP GET : données encodées dans l URL de la page à la fin de l URL, on ajoute le caractère? puis pour chaque paramètre on ajoute nom=val les paramètres sont séparés par le caractère & http://www.monserveur.org/index.php?page=ajout&k=4 contenu_formulaire : balises représentant les différents composants de saisie 35/74

Composants de formulaire Composant (ou élément) de formulaire : Généralement défini par la balise input Type du composant (liste, case à cocher, etc.) spécifié par l attribut type de la balise input Aussi des composants liste (balise select) et grand texte (balise textarea) Attributs recommandés d un composant : id (identification dans la page) et name (récupération de la valeur par ce nom) 36/74

Labels Dans un formulaire, il est recommandé d associer à chaque composant un texte descriptif (label) Syntaxe d un label : <label for="idducomposant">texte descriptif</label> Affiche un label texte descriptif, qui décrit le composant identifié par idducomposant Un clic sur le label donne le focus au composant pour permettre la saisie Important pour l accessibilité 37/74

Composant de saisie de texte Syntaxe d un composant de saisie de texte : <input type="text" name="champ1" id="idchamp1"/> Crée un champ de saisie pour une ligne de texte : champ1 est la valeur donnée comme nom du composant idchamp1 est la valeur de l identifiant du composant (celle à utiliser dans l attribut for de <label>) Attributs optionnels : size="un_nombre" : la taille du champ en caractères value="une_valeur" : texte pré-saisi utile pour les opérations de modification Pas de balise fermante 38/74

Composant de saisie de texte (2) Syntaxe d un composant de saisie de texte masqué : <input type="password" name="nom"/> Même composant que le champ texte, mais les caractères saisis sont remplacés par des (typiquement utilisés pour saisir un mot de passe) 39/74

Composant de saisie d un grand texte Syntaxe d un composant de saisie de grand texte : <textarea name="nom" rows="h" cols="l"> contenu pré saisi </textarea> Crée un champ de saisie pour du texte sur plusieurs lignes, avec les attributs : nom est la valeur du paramètre name de ce composant h est la hauteur du composant en nombre de lignes l est la largeur du composant en nombre de caractères le contenu pré-saisi peut être vide et ne contient pas de balise 40/74

Paramètres cachés Syntaxe d un composant caché : <input type="hidden" name="nom" value="val"/> Permet de donner la valeur val au paramètre caché nom Ce composant n est pas affiché utile pour spécifier un identifiant dans un formulaire de modification des informations de la base 41/74

Listes déroulantes Syntaxe d une liste déroulante : <select name="nom"> <option value="val1">texte 1</option> <option value="val2">texte 2</option>... </select> Crée une liste déroulante ayant comme sélection possible Texte 1, Texte 2,... La valeur du paramètre name correspond à la sélection de l utilisateurice (e.g., val1 pour Texte 1) L attribut value est optionnel (par défaut, la valeur vaut le texte dans la balise option) Attribut selected="true" dans une des balises option pour pré-sélectionner cette option 42/74

Case à cocher Syntaxe d une case à cocher : <label for="id1">texte 1</label><input type="checkbox" name="nom" id="id1" value="label1"/> <label for="id2">texte 2</label><input type="checkbox" name="nom" id="id2" value="label2" /> Crée deux cases à cocher id1 et id2, portant sur le même paramètre (nom), avec pour valeur label1 et label2 : Les cases d un même paramètre nom peuvent toutes être cochées à un moment donné Attribut optionnel checked pour pré-sélectionner une case Utilisation recommandée des balises <label> 43/74

Boutons radio Syntaxe d un bouton radio : <label for="id1">texte 1</label><input type="radio" name="nom" id="id1" value="label1"/> <label for="id2">texte 2</label><input type="radio" name="nom" id="id2" value="label2" /> Crée deux boutons radio portant sur le même paramètre (même valeur pour leur attribut name), ayant des valeurs respectives label1 et label2 : Un seul bouton radio coché à un moment donné parmi tous ceux qui portent sur le même paramètre Attribut optionnel checked pour pré-sélectionner 44/74

Boutons de soumission Syntaxe d un bouton de soumission : <input type="submit" value="texte" /> Crée un bouton déclenchant le chargement de la page de destination (attribut action de la balise form) texte est le texte affiché sur le bouton Syntaxe d un bouton de réinitialisation des valeurs : <input type="reset" value="texte" /> Crée un bouton déclenchant la réinitialisation du formulaire, en utilisant les valeurs pré-saisies lorsqu elles existent texte est le texte affiché sur le bouton 45/74

Autres éléments de formulaires Nouveaux types de l élément <input> en HTML5 : tel, url, email search datalist (auto-complète un champ grâce à une liste de valeurs prédéfinies) date, time, datetime, week, month number range (barre de progression) color Nouveaux éléments en HTML5 : <output> (somme d un calcul) <keygen> (génération de clés de cryptage) 46/74

Quelques attributs utiles Quelques attributs introduits dans HTML5 : placeholder : texte indicatif dans un champ textuel, qui s efface quand l utilisateurice commence à saisir required : le formulaire ne peut être validé si un de ses composants avec attribut required n est pas rempli pattern : vérifier qu un champ respecte une expression régulière donnée (e.g., pattern pour url) Ajout de sémantique pour l attribut rel (valeurs stylesheet, next, author, etc.)... http://www.w3schools.com/tags/ 47/74

En résumé Dans un formulaire, chaque élément de saisie devient un paramètre (nom donné par l attribut name) Définition d une page traitement (attribut action) et d un mode de transmission des paramètres (attribut method) Démo avec demo2.html (code source sur la page du LIF4) 48/74

Sémantique des balises Depuis HTML 5, certaines balises apportent de la sémantique Balises pour organiser le contenu d une page : header footer nav section article aside En général, certaines parties sont communes à toutes les pages du site (e.g., header, footer, nav) http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/ http://freehtml5templates.com/ 50/74

Sémantique des balises Organisation des pages avec ces balises structurantes. Mais la mise en forme se fait ailleurs, avec le CSS! Deux exemples d organisation de page http://www.siteduzero.com/informatique/tutoriels/ apprenez-a-creer-votre-site-web-avec-html5-et-css3/ 51/74

Balise header L entête d une page, située en haut, inclut souvent le nom du site, un slogan, un logo ou bannière. Il peut y avoir plusieurs entêtes (e.g., une par section) <header> contenu de l entête de la page </header> Ne pas la confondre avec la partie head qui contient l entête du document (métadonnées, scripts, etc.) Un exemple d entête 52/74

Balise footer Le pied de page, située en bas, inclut en général des crédits, des mentions légales, un lien de contact, etc. <footer> contenu du pied de page </footer> Un exemple de pied de page 53/74

Balise nav La balise nav regroupe les principaux liens de navigation (menu principal) <nav> contenu du menu principal </nav> Un exemple de liens de navigation 54/74

Balise section La balise section regroupe des contenus selon leur thématique <section> <h1>titre de la section</h1> <p> contenu </p> </section> Un exemple de zone section 55/74

Balise article La balise article est une zone de contenu indépendante (qui peut être reprise sur un autre site) <article> <h1>titre de l article</h1> <p> contenu </p> </article> Un exemple de zone article 56/74

Balise aside La balise aside est une zone d informations complémentaires (e.g., infobox de Wikipedia) <aside> informations complémentaires </aside> Un exemple de zone aside 57/74

Balises de regroupement Les balises de contenu possèdent un "type de rendu", parmi lesquels : Inline (e.g., <a>, <img>), qui sont placés les uns à côté des autres (affichage horizontal) Block (e.g., <p>), qui sont placés les uns en dessous des autres (affichage vertical) Un élement inline peut être placé dans des éléments de type block, mais pas l inverse http://line25.com/articles/10-html-tag-crimes-you-really-shouldnt-commit 58/74

Balises de regroupement (2) On peut regrouper des balises (e.g., pour leur appliquer un style) en respectant leur affichage (block ou inline). Deux balises de regroupement sans sémantique : <div> et <span>. Ce sont des balises neutres (pas d effet visible sur la page sans ajout d attributs) <div> regroupe des éléments de type bloc ou inline : <div><p>un texte</p><p>et un second</p></div> <span> regroupe des éléments de type inline : <p><span>un texte <em> et la suite</em></span><p> 59/74

En résumé Réfléchir à la structuration du site en amont Privilégier l utilisation des balises de structuration (e.g., header, article) Si besoin, compléter la structuration avec les balises div et span 60/74

Architecture d un site Physiquement, les fichiers qui composent un site Web sont stockés dans un ou plusieurs répertoires, selon une certaine arborescence ou architecture. Il existe 4 types d architectures 62/74

Types d architecture Séquentielle : organisation linéaire (e.g., ordre alphabétique, chronologique) sites d apprentissage, tutoriaux, livres Hiérarchique : les pages sont organisées hiérarchiquement autour d une page (l index ou la page d accueil) type le plus courant, adapté pour une majorité de sites 63/74

Types d architecture (2) BDD (type grille) : les pages sont organisées en tableaux éventuellement corrélés (e.g., cas médicaux, listes de cours) sites au contenu complexe ou générés par une BD Réseau : exploitation maximale des liens HTTP (internes et externes) sites avec grande quantité de liens (e.g., sites collaboratifs) 64/74

Architecture d un site web Choix de l architecture et découpage de l information : En fonction du public (grille et web pour public averti) Des contenus (séquentiel pour contenu simple) Composition d un site : Page d accueil (index) Zones de contenu spécifique (fonctionnalité) Zones communes à chaque page (menu, entête, etc.) Répertoire d images Répertoire d inclusion... http://fr.wikipedia.org/wiki/conception_de_site_web 65/74

Modèle / template À de rares exceptions (e.g., sites d artistes), chaque page d un même site Web possède le même modèle / template (e.g., un menu à gauche, juste sous le header, avec fond orange) Modèle / template : ensemble des éléments de mise en page et mise en forme d un site Web (design) Mise en page et mise en forme CSS Mais le découpage de l information balises structurantes HTML Idéalement le modèle respecte des règles d ergonomie (cf cours LIF14 - IHM) De nombreux templates "tout prêt" (et souvent personnalisables) sont disponibles sur le Web et permettent de se focaliser sur le contenu des pages 66/74

Découpage de l information (1) Solution 1 : chaque page contient tout Chaque page contient le code de son contenu spécifique Chaque page contient le code des zones communes (menu, entête, etc.) Chaque page contient donc l intégralité du modèle 67/74

Découpage de l information (1) Solution 1 : chaque page contient tout Chaque page contient le code de son contenu spécifique Chaque page contient le code des zones communes (menu, entête, etc.) Chaque page contient donc l intégralité du modèle Problème : en cas de modification d une zone commune (voire du modèle), il faut modifier chaque page! 67/74

Découpage de l information (2) Solution 2 : une page par contenu spécifique Chaque page contient le code de son contenu spécifique Les zones communes (menu, entête, etc.) sont dans des fichiers externes Besoin de commandes spécifiques pour inclure un fichier externe (PHP, jquery/javascript, Apache SSI, etc.) 68/74

Découpage de l information (3) Illustration de la solution 2 : une page par contenu spécifique, et les zones communes dans des fichiers externes 69/74

Découpage de l information (4) Solution 3 : une seule page (e.g., index.html) L unique page contient le code des zones communes (menu, entête, etc.), ou les zones communes sont dans des fichiers externes Les différents contenus spécifiques sont dans des fichiers externes L unique page appelle un fichier externe pour afficher son contenu spécifique en fonction de la valeur d un paramètre (e.g., nom de page, identifiant de page) 70/74

Découpage de l information (5) Illustration de la solution 3 : une seule page, qui récupère les zones communes dans des fichiers externes et un contenu spécifique selon la valeur d un paramètre 71/74

En résumé Utilisation de l architecture hiérarchique Découpage de l information en utilisant des fichiers externes (pour les parties communes et éventuellement le contenu spécifique) Concernant l ergonomie, plus d informations en LIF14 (IHM) 72/74

Bilan Utilisation de HTML pour structurer et afficher le contenu d un site web : Balises principales de contenu et éléments de formulaire Pas de mise en forme ou de mise en page en HTML! Réflexions sur l organisation et l architecture du site 73/74

Bilan Utilisation de HTML pour structurer et afficher le contenu d un site web : Balises principales de contenu et éléments de formulaire Pas de mise en forme ou de mise en page en HTML! Réflexions sur l organisation et l architecture du site Prochain cours : l habillage du contenu avec CSS 73/74

Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? 74/74

Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? Que peut-on utiliser pour agencer les éléments d une page Web? Frames? Tableaux? Autre? 74/74

Questions? Avantages et inconvénients des méthodes GET ou POST pour transmettres les données d un formulaire? Que peut-on utiliser pour agencer les éléments d une page Web? Frames? Tableaux? Autre? Quels types de métadonnées connaissez-vous au niveau des BD? 74/74