ISN : B6-Langages du Web Les langages du Web Michel Van Caneghem Mai 2012 Les langages du Web Langages de description : Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page web en langage HTML : On met en valeur le double usage du langage, lisible par un humain et interprétable par une machine. On utilise HTML pour écrire une page «à la main», puis on insiste sur le fait que ce langage sert aussi de cible à des générateurs de pages. On évalue la qualité des pages du point de vue de la correction syntaxique et de l'efficacité du message. langages à balises (HTML, XML) séparation contenu/rendu (CSS, XSLT) Ce dont on ne parlera pas! Comment faire un site web ; Comment faire une belle page web ; Comment faire un site qui interroge une base de données. Il est certain que c'est ce qui intéresse les élèves, mais le but c'est d'apprendre quelques bases, pour pouvoir comprendre ce qui se passe... Il existe de nombreux tutoriaux sur Internet qui expliquent (parfois clairement) comment faire : il s'agit souvent de recopier un modèle en faisant de légères modifications. On peut effectivement faire un beau site Web sans comprendre grand chose. Cependant, je vous montrerai quelques exemple que j'ai réalisés récemment. HTML L HyperText Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C est un langage de balisage qui permet d écrire de l hypertexte, d où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d inclure des ressources multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que des applets (Wikipedia). En 1991 par Tim Berners-Lee ; En 1993 : Apports de NCSA Mosaic : HTML 1.0 ; 1995-1996 : HTML 2.0 ; 1997 : HTML 3.2. et 4.0 -- version actuelle ; 2000-2006 : XHTML ; 2007 - HTML5. Les feuilles de style : CSS CSS (Cascading Style Sheets : feuilles de style en cascade) est un langage informatique qui sert à décrire la présentation des documents HTML et XML. Les origines des CSS sont donc liées à trois alternatives majeures : HTML est-il un format de structuration ou un format mixte de mise en forme et de structuration? Les choix de présentation de l'auteur doivent-ils avoir la primauté sur ceux de l'utilisateur? La réponse aux besoins est-elle un format de description de la mise en forme, ou un langage de transformation? Une des difficultés majeures concernait les outils qui affichaient la page web : les naviguateurs, versus les standards. La situation semble s'être éclaircie avec CSS 2.1 (2007). la plupart des naviguateurs implante cette recommandation et on utilise de plus en plus cette méthode pour présenter les pages web. csszengarden/index.html 1
Enrichissement des pages web : Javascript JavaScript est un langage de programmation de scripts principalement utilisé dans les pages web interactives. C'est un langage orienté objet. Du code JavaScript peut être intégré directement au sein des pages Web, pour y être exécuté sur le poste client. C'est alors le navigateur Web qui prend en charge l'exécution de ces programmes appelés scripts. Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l'interface Document Object Model, fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles, strictement cosmétiques ou à des fins ergonomiques. jquery est une bibliothèque JavaScript libre qui porte sur l'interaction entre JavaScript (comprenant AJAX) et HTML, et a pour but de simplifier des commandes communes de JavaScript. Un exemple d'utilisation de jquery : PRSIN301.html Les pages web dynamiques Une page web statique ne fait que présenter toujours la même information. Un page web dynamique présente une information qui dépend soit de l'utilisateur (consultation d'information), soit du moment présent (les nouvelles), soit d'autre chose. Cela amène à regarder les deux cotés de la communication : Le coté client : C'est ce qui se passe dans le naviguateur. Les langages concernés sont HTML + CSS + Javascript et parfois Java ou Flash Le coté serveur : C'est ce qui se passe dans le serveur Web (Souvent Apache). Le serveur doit répondre aux requètes du client. Les langages concernés sont le plus souvent PHP, mais on trouve aussi Python et Java. Souvent il y a une base de donnéees associée (par exemple MySQL). On reporte de plus en plus le travail de mise en forme vers le coté client (On charge de gros programmes JavaScript) en allégeant la charge du serveur. Encore plus dynamique On commence a ne plus faire de différences entre une application locale et une page web distante. Les deux termes à retenir sont : AJAX : Ajax est la combinaison de technologies telles que JavaScript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web interactives : DOM et JavaScript sont utilisés pour modifier l'information présentée dans le navigateur par programmation. L'objet XMLHttpRequest est utilisé pour dialoguer de manière asynchrone avec le serveur Web. La notation XML est utilisée pour structurer les informations transmises entre le serveur Web et le navigateur. En alternative au format XML, les applications Ajax peuvent utiliser les fichiers texte ou JSON.C'est le présent HTML5 WebSocket is a web technology providing for multiplexing bi-directional, full-duplex communications channels over a single TCP connection. C'est le futur Un premier point Nous avons vu beaucoup de choses. Certaines sont faciles comme le langage HTML, XML D'autres sont un peu plus compliquées comme les CSS ou XSLT D'autres sont encore plus compliquées comme Javascript et le modèle DOM D'autres nécessitent des connaissances Réseau : Client/Serveur et AJAX D'autres sont vraiment très très compliquées : WebSocket Nous allons dans la suite approfondir HTML et XML, et dire quelques mots sur CSS et un mot sur XSLT. HTML un langage à balise Une page de base 10 mai 2012 Cours B6 -- (ISN) Langages du Web 2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>insérer ici le titre de la page</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>c'est ici que nous allons mettre en œuvre le contenu de la page!</p> </body> </html> Les exemples qui vont suivre sont extraits du site : http ://slaout.linux62.org/html_css HTML la balise <p> et les blancs HTML <H1> <H2> <H3> HTML les listes 10 mai 2012 Cours B6 -- (ISN) Langages du Web 3
HTML les ancres et les liens HTML les images HTML les tableaux 10 mai 2012 Cours B6 -- (ISN) Langages du Web 4
HTML les tableaux (2) HTML <div> et <span> HTML formulaires 10 mai 2012 Cours B6 -- (ISN) Langages du Web 5
action : programme à exécuter method : comment on passe les arguments. Avec get, les arguments sont passés dans l'url séparés par de "?" XHTML Une page de base <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> The Most Important Differences from HTML : XHTML elements must be properly nested XHTML elements must always be closed XHTML elements must be in lowercase XHTML documents must have one root element XML Le XML (Extensible Markup Language, «langage de balisage extensible») est un langage informatique de balisage générique qui dérive du SGML. Cette syntaxe est dite extensible car elle permet de définir différents espaces de noms, c'est-à-dire des langages avec chacun leur vocabulaire et leur grammaire, comme XHTML, XSLT, RSS Elle est reconnaissable par son usage des chevrons (< >) encadrant les balises. L'objectif initial est de faciliter l'échange automatisé de contenus complexes (arbres, texte riche ) entre systèmes d'informations hétérogènes (interopérabilité). Avec ses outils et langages associés une application XML respecte généralement certains principes : la structure d'un document XML est définie et validable par un schéma ou une dtd, un document XML est entièrement transformable dans un autre document XML (xslt). Un exemple XML Un petit fichier xml <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE notes SYSTEM "Note.dtd"> <notes> <note> <to>tove</to> <from>jani</from> <heading>reminder</heading> <body>don't forget me this weekend!</body> </note> <note> <to>michel</to> <from>cristina</from> <heading>rappel</heading> <body>j'arriverai en retard</body> </note> </notes> 10 mai 2012 Cours B6 -- (ISN) Langages du Web 6
et sa dtd la dtd <?xml version="1.0" encoding="utf-8"?> <!ELEMENT notes (note+)> <!ELEMENT note (to,from,heading,body)> <!ELEMENT to (#PCDATA)> <!ELEMENT from (#PCDATA)> <!ELEMENT heading (#PCDATA)> <!ELEMENT body (#PCDATA)> On utilise maintenant une description plus précise (et plus complexe) des fichiers XML : les schemas. Un exemple SVG fonctionne dans la plupart des navigateur. On peut réaliser des dessins très complexes par exemple Tectonic_plates.svg. Un exemple MathML Un bout de mathml Given the quadratic equation <math xmlns="http://www.w3.org/1998/math/mathml"> <mrow> <mi>a</mi> <mo> <!-- ⁢ --></mo> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>b</mi> <mo> <!-- ⁢ --></mo> <mi>x</mi> <mo>+</mo> <mi>c</mi> <mo>=</mo> <mi>0</mi> </mrow> </math> CSS : Séparer la structure d'un document de ses styles de présentation L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. Il est par exemple possible de ne décrire que la structure d'un document en HTML, et de décrire toute la présentation dans une feuille de style CSS séparée. Les styles sont appliqués au dernier moment, dans le navigateur web des visiteurs qui consultent le document. La structure du document et la présentation peuvent être gérées dans des fichiers séparés. La conception d'un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d'être plus efficace. Dans le cas d'un site web, la présentation est uniformisée : les documents (pages HTML) font référence aux mêmes feuilles de styles. Cette caractéristique permet de plus une remise en forme rapide de l'aspect visuel. Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l'impression et une pour la lecture à l'écran. Certains navigateurs web permettent au visiteur de choisir un style parmi plusieurs. Le code HTML est considérablement réduit en taille et en complexité, puisqu'il ne contient plus de balises ni d'attributs de présentation. 10 mai 2012 Cours B6 -- (ISN) Langages du Web 7
CSS (1) CSS(2) : ou mettre les déclarations 3 possibilités <head> <title>ma page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> ========================================================== <head> <style type="text/css"> h1 { color: navy; } h2 { color: blue; } </style> </head> =========================================================== <body> <h1 style="color: navy;">titre de page</h1> <h2 style="color: blue;">titre</h2> </body> CSS(3) : selecteurs Il y a 3 manières de selectionner une partie de HTML pour la mettre en forme : selecteur de balise par exemple <h1>titre</h1> h1 {background-color: gray; color: navy;} selecteur de classe par exemple <h1 class="titre">titre</h1>.titre {background-color: gray; color: navy;} d'id par exemple <h1 id="premiertitre">titre</h1> #premiertitre {background-color: gray; color: navy;} CSS (4) : les tableaux 10 mai 2012 Cours B6 -- (ISN) Langages du Web 8
<table id="customers"> <tr> <th>company</th><th>contact</th><th>country</th></tr> <tr><td>alfreds Futterkiste</td><td>Maria Anders</td><td>Germany</td></tr> <tr class="alt"><td>berglunds snabbköp</td><td>christina Berglund</td><td>Sweden</td></tr> CSS (5) le modèle des boites CSS (6) Divers Il y a encore beaucoup de directives : Certaines concernent la position, relative ou absolue des boites Certaines concernent la possibilité d'afficher ou de cacher certaines parties d'une page En utilisant Javascript, on a la possibilité d'avoir des pages qui ont des comportements interactifs (onglets, feuilleter des pages, etc..) Attention cependant, les naviguateurs n'ont pas toujours les mêmes comportements... Il faut utiliser des bibliothèque externes qui en fonction du navigateur font des corrections. XSLT XSLT (extensible Stylesheet Language Transformations), défini au sein de la recommandation XSL du W3C, est un langage de transformation XML de type fonctionnel. Il permet notamment de transformer un document XML dans un autre format, tel PDF ou encore HTML pour être affiché comme une page web. Philosophie différente de CSS : ce n'est pas un langage de description mais plutôt un langage de transformation. Cette transformation est faite à l'aide d'un programme (Xalan ou Saxon) qui est disponible sous forme d'une API dans la plupart des langages de programmation. Mais ce programme se trouve également intéggré dans la plupart des navigateurs. Ce qui fait que l'on peut mettre du xml dans une page web!! 10 mai 2012 Cours B6 -- (ISN) Langages du Web 9
XSLT (1) le fichier de transformation <?xml version="1.0" encoding="iso-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:template match="/"> <html> <body> <h2>my CD Collection</h2> <table border="1"> <tr bgcolor="#9acd32"> <th>title</th> <th>artist</th> </tr> <xsl:for-each select="catalog/cd"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="artist"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet> XSLT (1) le fichier à transformer <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/xsl" href="cdcatalog.xsl"?> <catalog> <cd> <title>empire Burlesque</title> <artist>bob Dylan</artist> <country>usa</country> <company>columbia</company> <price>10.90</price> <year>1985</year> </cd>.. </catalog> Voici ce que cela donne catalogue.xml Conclusion C'est un sujet qui intéresse les étudiants et qui devrait donc intéresser les élèves de lycée. Cependant il est très facile de "bricoler" sans parfois comprendre grand chose. Il faut profiter de cet enthousiasme, pour faire passer le plus de concepts possibles, mais parfois c'est très difficile!! 10 mai 2012 Cours B6 -- (ISN) Langages du Web 10