Xavier Tannier [email protected] Introduction

Xavier [email protected]

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


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/

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


• 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


• 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 >  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Cours de Programmation Web</title>

 <meta name="description" lang="fr" content="cours de prog web" /> <meta name="keywords" lang="fr" content="web,XHTML" />

 <link rel="stylesheet" type="text/css" href="./style.css" />  </head >...


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...


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...


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 !


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)


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>


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


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 >


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


Les formulaires XHTML


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


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"


HTML

Les types de champs

24

• input type = " "

• label for

• textarea name cols rows

text hiddenpasswordcheckbox radiofilesubmitresetimage button


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


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


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 !


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é


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>


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/*...


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

http://www.w3.org/TR/xhtml11/

http://www.w3.org/TR/xhtml1/

http://www.w3.org/TR/REC-xml/

http://www.w3.org/TR/REC-html40/

Documents

Xavier Tannier [email protected] Introduction