BDW1 - Programmation web - HTML · 2020. 10. 1. · BDW1-Programmationweb-HTML FabienDuchateau...
Transcript of BDW1 - Programmation web - HTML · 2020. 10. 1. · BDW1-Programmationweb-HTML FabienDuchateau...
BDW1 - Programmation web - HTML
Fabien Duchateau
fabien.duchateau [at] univ-lyon1.fr
Université Claude Bernard Lyon 1
2020 - 2021
https://perso.liris.cnrs.fr/fabien.duchateau/BDW1/
Positionnement dans BDW1
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 2 / 69
Introduction
Les BD sont rarement manipulées directement, mais plutôt :I Via une application bureau (e.g., Firefox avec SQLite)I Via un site / application web (e.g., un blog)I Intégrées à un ERP (e.g., SAP)I …
Dans ce cours, utilisation d’une BD à travers un site web :I Popularité croissanteI Facilité de développementI En prévision du stage de L3
http://sqlite.org/http://fr.wikipedia.org/wiki/Progiciel_de_gestion_int%C3%A9gr%C3%A9
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 3 / 69
Fonctionnement d’un serveur web
Un serveur web travaille :I Soit en relayant l’information (page statique)I Soit en générant l’information (page dynamique)
http://fr.wikipedia.org/wiki/Programmation_webhttp://www.onelib.org/article/lets-build-a-web-server-part-1
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 4 / 69
Pages web statiquesI Demande d’accès à une page web depuis un navigateur (URL
saisie, clic sur un lien, utilisation d’un signet, etc.)I Le navigateur contacte le serveur webI Le serveur web lit le fichier demandé sur le disque durI Le serveur web envoie le contenu HTML du fichier au
navigateurI Le navigateur affiche le contenu de la page (et demande
éventuellement d’autres fichiers au serveur comme des images)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 5 / 69
Pages web statiques (2)
I Pas besoin de programmation côté serveurI Pour changer le contenu, il faut éditer des fichiersI Pas de participation des internautes (e.g., commentaires)
http://wordpress.laurentdumoulin.com/http://en.wikipedia.org/wiki/Static_web_page
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 6 / 69
Pages web statiques (2)
I Pas besoin de programmation côté serveurI Pour changer le contenu, il faut éditer des fichiersI Pas de participation des internautes (e.g., commentaires)
http://wordpress.laurentdumoulin.com/http://en.wikipedia.org/wiki/Static_web_page
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 6 / 69
Pages web dynamiquesUne page dynamique génère son contenu au moment de lademande, en fonction :I De paramètres fournis avec la demande (e.g., formulaires)I Du contenu d’une base de données
Par dynamique, on parle ici de contenu (variable dans le temps).Ne pas confondre avec dynamique au sens interactif (e.g., avec duJavaScript)
http://en.wikipedia.org/wiki/Dynamic_web_pageBDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 7 / 69
Pages web dynamiques (2)
I Demande d’accès à une page web depuis un navigateurI Le navigateur envoie une demande au serveur web
comprenant :I le nom de la page, qui correspond en fait à un programmeI éventuellement un ensemble de paramètres
I Le serveur web exécute le code source du programme :I en utilisant les paramètres transmis avec la demande du
navigateurI en récupérant si besoin des données dans une BD ou sur le
disqueI le programme génère un contenu HTML
I Le contenu HTML est envoyé au navigateurI Le navigateur affiche le résultat
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 8 / 69
Pages web dynamiques (3)
I Majorité de sites web dynamiques depuis les années 2000 (web2.0, CMS, etc.)
I Théoriquement plus long pour afficher une pageI Besoin d’un langage de programmation côté serveur
http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_contenuBDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 9 / 69
Pages web dynamiques (3)
I Majorité de sites web dynamiques depuis les années 2000 (web2.0, CMS, etc.)
I Théoriquement plus long pour afficher une pageI Besoin d’un langage de programmation côté serveur
http://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_contenuBDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 9 / 69
Langages pour la programmation web
Quelques langages populaires :
I Pour la structure et le contenu des pages : HTML, XML
I Pour la présentation (mise en page / forme) : CSS
I Pour le comportement (interactions) : JavaScript, AJAX
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 10 / 69
Langages pour la programmation web (2)
I Pour des animations : Flash (à éviter)
I Pour générer le contenu (de pages dynamiques) : PHP,Python, Java, Perl, JavaScript, …
I Pour interroger une source de données : SQL, XPath, XQuery,SPARQL, …
Dans cet enseignement : HTML, CSS et PHP (et SQL !)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 11 / 69
Outils pour la programmation web
I Éditeurs textuels (Emacs, BlueFish, VSCode, Brackets, Atom,…) ou WYSIWYG (Dreamweaver, NVU, …)
I CMS pour Content Management System (Drupal, Joomla,Spip, Wordpress, …)
I Framework (Symfony, Laravel, Hibernate, …)
http://fr.wikipedia.org/wiki/%C3%89diteur_HTMLhttp://fr.wikipedia.org/wiki/WYSIWYGhttp://fr.wikipedia.org/wiki/Syst%C3%A8me_de_gestion_de_contenuhttp://fr.wikipedia.org/wiki/Liste_de_frameworks_PHP
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 12 / 69
Outils pour la programmation web (2)
Dans cet enseignement : un éditeur textuel
http://www.luc-damas.fr/humeurs/BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 13 / 69
Plan
Syntaxe de base du HTML
Balises structurantes
Balises de contenu
Formulaires
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
GénéralitésHTML pour HyperText Markup Language :I Langage de balisage (structure + contenu)I Origine : 1989-1990I Toujours en développement (HTML5)I Extension de fichiers : .htmlI Standard W3C depuis 1996
Fichier HTML :I Fichier texte contenant des informations de structurationI C’est le navigateur qui lit le fichier et interprète les balises
pour faire l’affichage
http://fr.wikipedia.org/wiki/Hypertext_Markup_Languagehttp://fr.wikipedia.org/wiki/Langage_de_balisagehttp://www.w3.org/TR/html5/
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 15 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Principe des balises
La structure est indiquée à l’aide de balises :I 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 et une fermante avecun slash)
<balise> du texte ou autre </balise>
Il existe des balises orphelines (une ouvrante seulement, avecrecommandation de mettre le slash fermant)
<balise />
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 16 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Principe des balises (2)
Une balise ouvrante peut contenir des attributs de la formenom="valeur" :I 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>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 17 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 18 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Définition du type document
Balise doctype spécifie le type de document :I Plusieurs versions (et variantes) de la norme HTMLI Il faut donc préciser laquelle on utilise (et s’y tenir)I Obligatoire si l’on veut faire valider son document par un
validateurI Balise doctype simplifiée depuis HTML5 :
<!DOCTYPE html>
Balise html pour le début du document :I Attribut lang pour la langue (synthèse vocale)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 19 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
En-tête (partie <head>)
Partie head du fichier HTML pour :I Des métadonnées sur le document, utilisables par les
navigateurs ou moteurs de recherche :I Syntaxe d’une métadonnée :
<meta name="propriété" content="attributs">
I Exemples de métadonnées :I la balise title, obligatoire (dans la norme)I des mots-clésI l’encodage du document (important pour afficher
correctement les caractères accentués ou spéciaux)I le comportement des robots
I La définition de scripts (qui seront utilisés dans la partie body)I Un lien vers une feuille de style ou des scripts externes
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 20 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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 ducodage, le titre de la page, un lien vers un fichier de style CSS etdes mots-clés décrivant le document
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 21 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Contenu (partie <body>)
Partie body du fichier HTML pour le contenuI Organisation réalisée avec des balises structurantes, puis avec
des balises de contenu
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 22 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Bonnes pratiques
I Les navigateurs sont assez tolérants aux erreurs deprogrammation en HTML
I Aérer le code (mise à jour plus facile ⇒ soutenance de projet)
I Commenter le code, avec les balises <!−− −− >
<!−− ceci est un commentaire −−>
I Balises en minuscules
I Penser à l’accessibilité (e.g., attributs alt)
I Éviter les balises spécifiques à un navigateur
I Valider son fichier HTML avec un validateur
http://validator.w3.org/BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 23 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
En résumé
HTML, un langage de balises utilisé pour structurer le contenu :I Partie head = métadonnées de la pageI Partie body = contenu de la page
http://watershedcreative.com/naked/html-tree.htmlBDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 24 / 69
Plan
Syntaxe de base du HTML
Balises structurantes
Balises de contenu
Formulaires
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Généralités
Depuis HTML5, certaines balises apportent de la sémantique, enparticulier pour organiser le contenu d’une page :I headerI footerI navI mainI section, articleI aside
En général, certaines parties d’un site sont communes à toutes lespages du site (e.g., header, footer, nav)
http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/http://freehtml5templates.com/
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 26 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Exemple d’organisation d’une page (design)
Deux exemples d’organisation de page avec ces balisesstructurantes. Attention, la mise en page et mise en forme se font
ailleurs, avec le CSS !
http:
//www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 27 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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>
Un exemple d’entête
Ne pas la confondre avec la partie head qui contient l’entête du document(métadonnées, scripts, etc.)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 28 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balise footer
Le pied de page, situé en bas, inclut en général des crédits, desmentions légales, un lien de contact, etc.
<footer>contenu du pied de page
</footer>
Un exemple de pied de page
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 29 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balise nav
La balise nav regroupe les principaux liens de navigation (menuprincipal)
<nav>contenu du menu principal
</nav>
Un exemple de menu
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 30 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balise main
La balise main est utilisée pour le contenu principal d’une page
<main><h1>Titre du contenu</h1><section> contenu section 1 </section><section> contenu section 2 </section>
</main>
Un exemple de zone main
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 31 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balises section et article
Balises utilisées pour découper le contenu principal. La balisearticle est indépendante (qui peut être reprise sur un autre site)
<section><h1>Titre de la section</h1><p> contenu </p>
</section>
Exemples de section : leszones ”liste des séries” et
”liste des actrices”Un exemple de zone article
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 32 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 33 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balises de regroupement
Chaque balise possède un ”type de rendu”, parmi lesquels :I Inline = éléments placés les uns à côté des autres (affichage
horizontal)I Block = éléments placés les uns en dessous des autres
(affichage vertical)
Un élément 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
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 34 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balises de regroupement (2)
Pour regrouper des éléments (e.g., pour leur appliquer un style),deux balises de regroupement :I <div> et <span>I Balises neutres (pas d’effet visible sur la page) et sans
sémantiqueI Respect de l’affichage (block ou inline)
<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>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 35 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
En résumé
I Réfléchir à la structuration du site en amont (conception)I Privilégier l’utilisation des balises structurantes (e.g., header,
main)I Compléter la structuration avec les balises div et span
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 36 / 69
Plan
Syntaxe de base du HTML
Balises structurantes
Balises de contenu
Formulaires
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Généralités
À l’intérieur des balises structurantes, le contenu est (encore)organisé par des balises de contenu :I ParagrapheI ListesI TableauI TitreI …
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 38 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Paragraphes
<p>un texte qui s’étend <br>sur plusieurs lignes<br>et qui forme un paragraphe</p>
I Le texte entre les balises <p> et </p> forme un paragraphe(saut de ligne avant et après le paragraphe)
I Les balises <br/> indiquent un saut de ligne
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 39 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Texte important
Ces balises signalent un texte important, mais sont purementsémantiques : c’est le navigateur qui décide de leur appliquer unstyle (gras, italique), ce qui est personnalisable avec les CSS
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>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 40 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Titres
Balises pour différents niveaux de titre, balises uniquementsémantiques !
I <h1>un premier titre</h1>c’est un titre très important (traduit par le navigateur par unaffichage plus gros, en gras)
I <h2>un second titre</h2>c’est un titre important (traduit par le navigateur par unaffichage un peu moins gros)
I …I <h6>un sixième titre</h6>
c’est la balise pour un titre peu important (dernier niveau)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 41 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
ListesSyntaxe 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>BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 42 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Tableaux
Un tableau est délimité par <table> et </table> :I Balises <tr> pour créer une nouvelle ligneI Balises <th> pour une cellule d’entête ou <td> pour une
cellule de contenu
<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>
http://fr.wikibooks.org/wiki/Le_langage_HTML/TableauxBDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 43 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Liens hypertextes
<a href="adresse_web">zone cliquable</a>
I L’attribut href spécifie l’adresse (URL, fichier, ancre) dedestination
I Ce qui est entre les balises <a> et </a> (zone cliquable)devient un lien cliquable
I Autres attributs de la balise <a> :I target="cible" pour ouvrir l’URL dans cible
(target="_blank" pour une nouvelle fenêtre)I name="mon_ancre" pour définir une ancre mon_ancre
(endroit précis d’une page)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 44 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Liens hypertextes (2)
Caractéristiques de la destination (href) :
I Absolu : adresse_web a un chemincomplet (obligatoire pour un liensitué sur un autre site web ou avecprotocole différent)
I Relatif : adresse_web a un chemindéfini par rapport à la page actuelle(préférable sur son site)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 45 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Exemples de liens hypertextes
<a href="documents/un_doc.pdf">un lien interne, avecchemin relatif</a>
<a href="http ://fr.wikipedia.org/">un lien externe, avecchemin absolu</a>
<a href="http ://fr.wikipedia.org/" target="_blank">unlien externe, avec chemin absolu, qui s’ouvre dans une nouvellefenêtre</a>
<a href="page.html#section3">un lien interne, pointant surl’ancre section3 de la page page.html</a>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 46 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Images
<img src="url_image" alt="texte alternatif" />
I Insertion de l’image situéeà l’adresse url_image
I Pas de balise fermante pour <img>I Attribut alt conseillé (pour
l’accessibilité)I Balises <figure> et <figcaption>
pour ajouter une légende
http://fr.wikibooks.org/wiki/Le_langage_HTML/Imageshttp://vidberg.blog.lemonde.fr/
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 47 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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 fautpas les utiliser !⇒ La mise en forme seraréalisée avec les CSS
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 48 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
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 fautpas les utiliser !⇒ La mise en forme seraréalisée avec les CSS
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 48 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
En résumé
I Balises principales pour organiser le contenuI Autres balises pour le multimédia, les cadres, applets, etc.
(> 100 balises et > 200 attributs en HTML5)
Démo avec demo1.html (code source en ligne)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 49 / 69
Plan
Syntaxe de base du HTML
Balises structurantes
Balises de contenu
Formulaires
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Généralités
Objectifs des formulaires web :I Permettre à l’utilisatrice de saisir des paramètresI Envoyer les valeurs saisies pour chaque paramètre au serveurI Accéder à une page dynamique générée par le serveur selon les
valeurs des paramètres
Quels moyens ?I Différents composants (champs textuels, listes déroulantes,
cases à cocher, …)I À chaque composant correspond un paramètre
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 51 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Généralités (2)
Des formulaires bien connus pour générer des pages dynamiques
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 52 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balise de formulaire
<form action="url" method="GET|POST" name="nomF">contenu_formulaire
</form>
I Déclaration d’un formulaire (sans composant)I Un attribut name optionnelI Une action sous forme d’URL vers le fichier qui sera exécuté
après soumission du formulaireI Le corps du formulaire contenu_formulaire contient les
balises représentant les différents composants de saisie
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 53 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Balise de formulaire (2)
I Valeurs pour l’attribut method (méthode de transmission desparamètres) :I POST : données dans le corps de la requête HTTPI GET : données encodées dans l’URL de la page
I à la fin de l’URL, on ajoute le caractère ?I puis pour chaque paramètre on ajoute nom=valI les paramètres sont séparés par le caractère &
Exemple d’URL avec deux paramètres passés par GET :http://www.monserveur.org/index.php?page=ajout&k=4
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 54 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Composants de formulaire
Composant (ou élément) de formulaire :
I Généralement défini par la balise input
I Type du composant (liste, case à cocher, etc.) spécifié parl’attribut type de la balise input
I Aussi des composants liste (balise select) et grand texte(balise textarea)
I Attributs recommandés d’un composant : id (identificationdans la page) et name (récupération de la valeur par ce nom)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 55 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Labels
<label for="idDuComposant">Texte descriptif</label>
I Un label permet d’associer un texte descriptif (label) à uncomposant
I Le label texte descriptif décrit le composant identifié paridDuComposant
I Un clic sur le label donne le focus au composant pourpermettre la saisie
I Important pour l’accessibilité
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 56 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Composant de saisie de texte
<input type="text" name="nom" id="idTexte" />
I Champ de saisie pour une ligne de texteI L’attribut name précise le nom du composant (ici nom)I L’attribut id indique l’identifiant du composant (ici idTexte,
la valeur à utiliser dans l’attribut for de <label>)I Attributs optionnels :
I size="un_nombre" : la taille du champ en caractèresI value="une_valeur" : texte pré-saisi
I utile pour les opérations de modificationI Pas de balise fermante
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 57 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Composant de saisie de mot de passe
<input type="password" name="nom" />
I Même composant que le champ texte, mais les caractèressaisis sont remplacés par des ’?’ (typiquement utilisés poursaisir un mot de passe)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 58 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Composant de saisie d’un grand texte
<textarea name="nom" rows="h" cols="l">contenu pré-saisi
</textarea>
I Champ de saisie pour du texte sur plusieurs lignesI L’attribut name précise le nom du composant (ici nom)I Les attributs rows et cols précisent la hauteur et la largeur
du composant en nombre de lignes et nombre de caractèresrespectivement (ici h et l)
I Le contenu pré-saisi peut être vide et ne contient pas de balise
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 59 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Paramètres cachés
<input type="hidden" name="nom" value="val" />
I Un composant caché n’est pas affiché (mais visible dans lecode donc peu sécurisé)I utile pour spécifier un identifiant dans un formulaire de
modification des informations de la baseI Le paramètre caché a la valeur spécifiée par l’attribut value
(ici val)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 60 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Listes déroulantes
<select name="nom"><option value="val1">Texte 1</option><option value="val2">Texte 2</option>...
</select>
I Liste déroulante avec les choix possibles Texte 1, Texte 2, …I L’attribut optionnel value indique la valeur transmise
(éventuellement différente de son texte)I Par défaut, la valeur est égale au texte de la balise optionI Une balise option peut être pré-sélectionnée en lui ajoutant
l’attribut selected="true"
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 61 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Case à cocher
<label for="id1">Texte 1</label><input type="checkbox"name="nom" id="id1" value="val1" /><label for="id2">Texte 2</label><input type="checkbox"name="nom" id="id2" value="val2" />
I Deux cases à cocher portant sur le même paramètre (mêmevaleur pour leur attribut name), ayant des valeurs respectivesval1 et val2
I Les cases portant le même nom peuvent être toutes cochéesà un moment donné
I Attribut optionnel checked pour pré-sélectionner une caseI Utilisation recommandée des balises <label>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 62 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Boutons radio
<label for="id1">Texte 1</label><input type="radio"name="nom" id="id1" value="val1" /><label for="id2">Texte 2</label><input type="radio"name="nom" id="id2" value="val2" />
I Deux boutons radio portant sur le même paramètre (mêmevaleur pour leur attribut name), ayant des valeurs respectivesval1 et val2
I Parmi les boutons radio portant le même nom, un seul cochéà un moment donné
I Attribut optionnel checked pour pré-sélectionner un boutonI Utilisation recommandée des balises <label>
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 63 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Boutons de soumission
<input type="submit" value="texte" />
I Bouton déclenchant le chargement de la page de destination(attribut action de la balise form)
I texte est le texte affiché sur le bouton
<input type="reset" value="texte" />
I Bouton déclenchant la réinitialisation du formulaire, enutilisant les valeurs pré-saisies lorsqu’elles existent
I texte est le texte affiché sur le bouton
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 64 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Autres éléments de formulaires
Nouveaux types de la balise <input> en HTML5 :I tel, url, emailI searchI datalist (auto-complète un champ grâce à une liste de
valeurs prédéfinies)I date, time, datetime, week, monthI numberI range (barre de progression)I color
Nouvelles balises en HTML5 :I <output> (somme d’un calcul)I <keygen> (génération de clés de cryptage)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 65 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
Autres attributs en HTML5
I placeholder : texte indicatif dans un champ textuel, quis’efface quand l’utilisatrice commence à saisir
I required : le formulaire ne peut être validé si un de sescomposants avec attribut required n’est pas rempli
I pattern : vérifier qu’un champ respecte une expressionrégulière donnée (e.g., pattern pour url)
I Ajout de sémantique pour l’attribut rel (valeurs stylesheet,next, author, etc.)
I …
http://www.w3schools.com/tags/BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 66 / 69
Syntaxe de base du HTML Balises structurantes Balises de contenu Formulaires
En résumé
I Dans un formulaire, chaque élément de saisie devient unparamètre (nom donné par l’attribut name)
I Définition d’une page traitement (attribut action) et d’unmode de transmission des paramètres (attribut method)
Démo avec demo2.html (code source en ligne)
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 67 / 69
Un moment de réflexion
I Avantages et inconvénients des méthodes GET ou POST pourtransmettre les données d’un formulaire ?
I Que peut-on utiliser pour agencer les éléments d’une pageweb ? Frames ? Tableaux ? Autre ?
I Quels types de métadonnées connaissez-vous au niveau desBD ?
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 68 / 69
Un moment de réflexion
I Avantages et inconvénients des méthodes GET ou POST pourtransmettre les données d’un formulaire ?
I Que peut-on utiliser pour agencer les éléments d’une pageweb ? Frames ? Tableaux ? Autre ?
I Quels types de métadonnées connaissez-vous au niveau desBD ?
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 68 / 69
Un moment de réflexion
I Avantages et inconvénients des méthodes GET ou POST pourtransmettre les données d’un formulaire ?
I Que peut-on utiliser pour agencer les éléments d’une pageweb ? Frames ? Tableaux ? Autre ?
I Quels types de métadonnées connaissez-vous au niveau desBD ?
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 68 / 69
Bilan
Utilisation de HTML pour structurer et afficher le contenu d’unsite web :I Réflexions sur l’organisation du site (balises structurantes)I Balises principales de contenu et éléments de formulaireI Pas de mise en forme ou de mise en page en HTML !
Prochain cours :l’habillage du contenu avec CSS
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 69 / 69
Bilan
Utilisation de HTML pour structurer et afficher le contenu d’unsite web :I Réflexions sur l’organisation du site (balises structurantes)I Balises principales de contenu et éléments de formulaireI Pas de mise en forme ou de mise en page en HTML !
Prochain cours :l’habillage du contenu avec CSS
BDW1 - Bases de données et programmation web // Programmation web - HTML UCBL Lyon 1 69 / 69