View
135
Download
0
Category
Preview:
Citation preview
Xavier Tannierxavier.tannier@limsi.fr
Introduction
Programmation Web
XHTMLXavier Tannier
Internet et le Web
• Internet : un réseau mondial d'ordinateurs.• Différentes applications :
– Courrier électronique– Web– Échange de fichiers (FTP, peer-to-peer)– Console distante (telnet, VNC)– Vidéoconférence, e-commerce, télétravail, chat, collecticiel,…
• Le Web : un système hypertexte public fonctionnant sur Internet et permettant de consulter, avec un navigateur, des pages mises en ligne dans des sites.
2
Programmation Web
XHTMLXavier Tannier
Architecture du Web
3
Le client Le serveur
Le réseau
(navigateur) (HTTP)
Protocole TCP/IP(voir vos cours de réseaux)
URL (+ paramètres)
Type MIME + fichier
Programmation Web
XHTMLXavier Tannier
URL et MIME
• URL : Uniform Resource Locator– Identifie sur le Web un document ou un fragment
• MIME : Multipurpose Internet Mail Extensions– Type des documents transférés par le protocole HTTP
(différent de l’extention !)– La navigateur décide ainsi comment afficher le fichier– text/html, text/plain, application/pdf, application/zip, image/jpeg,
video/mpeg, audio/x-wav, etc.
4
http://www.limsi.fr/~xtannier/fr/Enseignement/index.html#web_bd
protocole machine répertoire fichier fragment
(http, https, ftp, news, mailto, telnet...)
Programmation Web
XHTMLXavier Tannier
Navigateurs
• Navigateurs graphiques (IE, Firefox, Opera, Konqueror, Safari...)• Navigateurs textuels (links, linx...)• Navigateurs auditifs• Robots
5
Pour le projet• Les projets devront être testés sur les 2 ou 3
navigateurs les plus courants
(et sur Linux + Windows)• L'accessibilité sera un critère important
Xavier Tannierxavier.tannier@limsi.fr
eXtended HyperText Markup Language
(XHTML)
Programmation Web
XHTMLXavier Tannier
(X)HTML
• (eXtended) HyperText Markup Language • Un langage à balises pour structurer (et dans HTML pour mettre en
forme) les documents
• Format ouvert, indépendant du logiciel et du matériel• XHTML :
– Successeur du HTML– Conforme aux normes XML (eXtended Markup Language)– Développé par le W3C (World Wide Web Consortium)
7
Pour le projet• XHTML• Tous les codes seront vérifiés par des validateurs
http://validator.w3.org/
Programmation Web
XHTMLXavier Tannier
L’essentiel du langage XML (1/3)
8
article
date auteur section bibliographie
2010-01-12 15:32:27
Dupont et Dupond
par …
…
bib …
…
<article date="2010-01-12 15:32:27" auteur="Dupont et Dupond" > <section>
<par> ... texte ...
</par> </section> <bibliographie> <bib id="Untel03" auteur="Untel"/> </bibliographie> …</article>
• Chaque nœud de l'arbre est un élément
• Un élément peut avoirdes attributs
• Les feuilles de l'arbre peuvent être des éléments textuels
• Un document XML = un arbre étiqueté et ordonné
Programmation Web
XHTMLXavier Tannier
L’essentiel du langage XML (2/3)
• Vocabulaire– Racine = document = arbre– Nœud = élément (entouré par des balises)– Balise de début (<title>), balise de fin (</title>), balise d’élément vide (<br/>)– Attribut : nom="valeur" dans la balise de début– Prologue : version de XML et type du document (ex : XHTML)
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
9
Programmation Web
XHTMLXavier Tannier
L’essentiel du langage XML (3/3)
• La structure des documents XML est imposée par une DTD ou un schéma XML
• Pour analyser des documents XML, on utilise deux méthodes :– DOM : construction de l'arbre en mémoire (puissant mais lent)– SAX : parcours linéaire du fichier (limité mais rapide)– Les analyseurs XML implémentent les API DOM ou SAX
• Un élément est défini de façon unique par son chemin XPath :/article[1]/section[2]/par[5]
10
Programmation WebXavier Tannier
HTML
Structure d’un document XHTML
11
<!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" lang="fr" xml:lang="fr" >
<head > <!-- En-tête du document -- >
</head >
<body > <!-- Corps du document -- >
</body >
</html >
Attributs de langue (redondant !)
Version de XHTML utilisée(pour les validateurs notamment)
Programmation WebXavier Tannier
HTML
Entêtes XHTML
12
<html > <head > <!-- Le jeu de caractères de la page (encodage) --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Pour le navigateur, l'historique et les moteurs de recherche --> <title>Cours de Programmation Web</title>
<!-- Pour les moteurs de recherche --> <meta name="description" lang="fr" content="cours de prog web" /> <meta name="keywords" lang="fr" content="web,XHTML" />
<!-- Pour plus tard ! --> <link rel="stylesheet" type="text/css" href="./style.css" /> <!-- ... --> </head >...
Programmation WebXavier Tannier
HTML
Les titres de section (h1-h6)
13
<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Introduction</h1> <h1>(X)HTML</h1> <h2>Les bases</h2> <h3>Rappels de XML</h3> <h2>Les balises</h2> </body ></html>
Pour l'instant, c'est le navigateur qui décide de la forme...
Programmation WebXavier Tannier
HTML
Emphases et compagnie
14
<html > <head >
<title>Cours de Programmation Web</title> </head > <body > <h1>Introduction</h1> <p><em>XHTML</em> est le successeur du HTML. <br /> Il respecte le standard <strong>XML</strong> </p> <hr /> <strong><em>Voilà !</em></strong> </body ></html>
Pour l'instant, c'est le navigateur qui décide de la forme...
Programmation WebXavier Tannier
HTML
Listes non ordonnées
15
<html > <head >
<title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <h2>Les balises :</h2> <ul> <li>de titre</li> <li>d'emphase</li> <li>de listes : <ul><li>ordonnées</li> <li>non ordonnées</li> <li>de définition</li></ul> </li> </ul> </body ></html>
En XHTML on ferme toutes les balises !
Programmation WebXavier Tannier
HTML
Listes ordonnées
16
<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <h2>Les cascades CSS, avec :</h2> <ol> <li>le style de l'auteur</li> <li>le style de l'utilisateur</li> <li>le style du navigateur</li> </ol> </body ></html>
Attributs de ol : type (valeurs "1", "a", "A", "i" ou "I")start (numéro de démarrage)
Programmation WebXavier Tannier
HTML
Listes de définitions
17
<html > <head >
<title>Cours de Programmation Web</title> </head > <body > <h1>Notions à connaître</h1> <dl> <dt>XML</dt><dd>eXtensible Markup Language</dd> <dt>XHTML</dt><dd>eXtended HTML</dd> <dt>CSS</dt><dd>Cascading Style Sheets</dd> </dl> </body ></html>
Programmation WebXavier Tannier
HTML
Images
18
<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h1>Images</h1> <img src="http://www.limsi.fr/modeles/images/logo-limsi.gif" alt="LIMSI" title="LIMSI" /> <br /> <img src="../images/terre.jpg" alt="La Terre" /> </body ></html>
Attribut alt indispensable, pour remplacer l'image lorsque le texte ne s'affiche pas ou pour les lecteurs (humains ou machines) n'ayant pas accès aux images.
Format d'images possibles : jpeg (photos)gif (animations)png (transparence)
infobulle
Programmation WebXavier Tannier
HTML
Liens
19
<html > <head >
<title>Cours de Programmation Web</title> </head > <body > <h2 id="liens">Liens utiles (avec une ancre)</h2> <ul> <li><a href="../BD.html">Le cours de BD (lien relatif)</a></li> <li><a href="http://www.w3.org">Le W3C (URL absolue)</a></li> <li><a href="http://www.limsi.fr"> <img src="http://www.limsi.fr/modeles/images/logo-limsi.gif" alt="Le site du LIMSI (image)" /></a></li> <li><a href="#bas">Aller en bas (ancre)</a></li> </ul> <br /><br /><br /><br /><br /> <a id="bas">Vous êtes en bas</a><br /> <a href="#liens">Retour vers l'ancre des liens</a> </body ></html >
Programmation WebXavier Tannier
HTML
Tableaux
20
<html > <head > <title>Cours de Programmation Web</title> </head > <body > <h2>Tableau</h2> <table> <caption>Comparaison XHTML / HTML</caption> <tr><th /><th>XHTML</th><th>HTML</th></tr> <tr><th >forme</th><td>non</td><td>oui</td></tr> <tr><th >structure</th><td colspan="2">oui</td></tr> <tr><th ><br></th><td rowspan="2">non</td><td
rowspan="2">oui</td></tr> <tr><th ><hr></th></tr> </table> </body ></html >
En trichant !
(feuille de sty
le)légende
ligne
cellule d'entête
cellule de donnée
cellules multi-colonneset multi-lignes
Xavier Tannierxavier.tannier@limsi.fr
Les formulaires XHTML
Programmation WebXavier Tannier
HTML
Les formulaires
22
<html > <body > <form method=" " enctype=" " action="script.php">
</form> </body ></html>
getpost
application/x-www-form-urlencodedmultipart/form-datatext/plain
URL du script auquel sera soumis le formulaire
(on verra plus tard...)
valeur par défaut
Programmation WebXavier Tannier
HTML
Les ensembles de champs
23
<html > <body > <form method=" " enctype=" " action="script.php">
<p> </p> <fieldset> <legend></legend> </fieldset>
<div> </div>
</form> </body ></html>
Si les champs de formulaires sont au milieu d'un texte
Pour regrouper des champs de formulaireayant une sémantique proche
Sinon
En XHTML, pas de champs de formulaire "en vrac"
Programmation WebXavier Tannier
HTML
Les types de champs
24
• input type = " "
• label for
• textarea name cols rows
text hiddenpasswordcheckbox radiofilesubmitresetimage button
Programmation WebXavier Tannier
HTML
Étiquette, saisie de texte
25
<form method=" " action="script.php"> <fieldset> <legend>Identité</legend> <label for="nom">Nom</label> <input type="text" name="nom" id="nom"
value="Nom par défaut" maxlength="25" /><br /> <label for="prenom">Prénom</label> <input type="text" name="prenom" id="prenom"
value="Prénom par défaut" maxlength="25" /><br /> <label for="passwd">Mot de passe</label> <input type="password" name="passwd" id="passwd"
value="12345678" maxlength="10" /><br /> </fieldset></form>
Sans feuille de style...
Optionnel. Un clic sur le labelsélectionne le champ de saisie
Programmation WebXavier Tannier
HTML
Saisie multiligne
26
<form method=" " action="script.php"> <div> <label>Description</label> <textarea name="desc" cols="40" rows="5"> </textarea><br />
<label>Commentaire</label> <textarea name="comm" cols="20" rows="10"> Pas de commentaire... </textarea> <br /> </div></form>
Texte par défaut
Programmation WebXavier Tannier
HTML
Champ caché
27
<form method=" " action="script.php"> <div> <input type="hidden" name="monnaie" value="EURO" /> </div></form>
– Permet de masquer des champs pour le client tout en envoyant leur contenu avec le formulaire
– Précise des informations name/value– Attention, à utiliser pour "masquer", pas pour "cacher" !
Le client peut éditer la page à la main pour voir et changer la valeur de ces champs !
Programmation WebXavier Tannier
HTML
Choix multiples (1/2)
28
<form method=" " action="script.php"> <div> <input type="checkbox" name="tele" id="tele"
value="teleOK" checked="checked" tabindex="0" /> <label for="tele">Décochez cette case si vous n'avez pas de télé</label> </div> <fieldset><legend>Paiement :</legend> <input type="radio" name="paiement" id="carte"
value="carte" checked="checked" tabindex="1" /> <label for="carte">Par carte</label> <input type="radio" name="paiement" id="cheque"
value="chaque" tabindex="2" /> <label for="cheque">Par chèque</label> </fieldset></form>
Optionnel mais très conseillépour l'accessibilité
Programmation WebXavier Tannier
HTML
Choix multiples (2/2)
29
<form method=" " action="script.php"> <div> <select name="age"> <label>Votre âge :</label> <option value="20">Moins de 20 ans</option> <option value="35" selected="selected">21 à 35 ans
</option> <option value="50">36 à 50 ans</option> <option value="51">Plus de 51 ans</option> </select> </div></form>
Programmation WebXavier Tannier
HTML
Fichier joint
30
<form method="" enctype="multipart/form-data" action="fic.php"> <div> <label for="fichier">Fichier joint :</label> <input type="file" name="fichier" id="fichier"
accept="text/*"/> </div></form>
type MIME (optionnel) : text/plaintext/htmlimage/gifvideo/*...
Programmation WebXavier Tannier
HTML
Bouton
31
<form method="" action="script.php"> <div> <input type="checkbox" name="tele"
value="teleOK" checked="checked" /> <label>Décochez cette case si vous n'avez pas de télé</label><br /> <input type="reset" value="Réinitialiser" /> <br /> <input type="submit" value="Envoyer" /> <br /> <input type="image" src="./infos.jpg" alt="Envoyer" /> </div></form>
Même comportement
type button : pas d'action, seulement du javascript. À éviter ! (accessibilité)
Programmation Web
XHTMLXavier Tannier
Et l’avenir ? HTML 5
• HTML 5 : la prochaine révision du langage par le W3C• Vision document complétée par une vision "application"• Suppression des balises de forme• Plus de balises de structure
– header– article– footer
• Ajout de balises d'API :– canvas– audio– video– draggable– ...
32
Programmation Web
XHTMLXavier Tannier
Références
• Spécification de XHTML 1.1http://www.w3.org/TR/xhtml11/
• Spécification de XHTML 1.0http://www.w3.org/TR/xhtml1/
• Spécification de XML 1.0http://www.w3.org/TR/REC-xml/
• Spécification de HTML 4.01http://www.w3.org/TR/REC-html40/
• HTML et XHTML : La Référence, O’Reilly
33
Recommended