Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres...

87
Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003

Transcript of Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres...

Page 1: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Code HTML / XHTML

Sébastien L’haire

Séminaire NTIC 2003-2004

Université Genève - Fac. Lettres

Novembre 2003

Page 2: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

2

Bref historique

SGML: Standard Generalized Markup Language (1980) standard de marquage de documents basé sur des balises

HTML: HyperText Markup Language inventé au CERN à Genève en 1989, couplé au protocole HTTP HyperText Transfer

Protocol donne naissance au World Wide Web World Wide Web Consortium W3C (1994)

http://www.w3c.org/ pour la standardisation du code XML: Extended Markup Language (1997) permet

de définir structures de documents, peu à peu implémenté sur Internet

Page 3: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

3

Pour publier / pour vos tests

Sur votre espace disque personnel (H), répertoire public.www

Atteignable par http://home.etu.unige.ch/~votre identificateur/

Par FTP à la maison: ftpnov.unige.ch, username .votre identificateur.LETTRES.BASTIONS.UNIGE

Page 4: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

4

Code HTML en bref

Code basé sur des balises/tags qui délimitent un document ou une partie

Tag: un code entre <>– A une balise ouvrante correspond en principe une

balise fermante </>• Ex: <html>… </html>

– Paramètres ou attributs• <p align="center">…

Les retours de chariot n'ont aucun effet. Une page peut être sur une seule ligne

Page 5: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

5

Squelette d'un document HTML

Structure d'un doc html<html><head>

<title>Mon titre</title>… autres infos

</head><body>… le corps du doc</body>

</html>

Page 6: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

6

XHTML Une adaptation de HTML aux standards de XML Langage plus contraint Tags en minuscules uniquement Tags uniques notées avec <../>

– <br/>, <img />, <hr/>,etc. Attributs toujours entre guillemets, y compris les

chiffres Pas d'attributs sans valeurs

– <hr noshade="noshade" /> vs <hr noshade> Croisements de balises interdits

– <p><b>Le chat dort.</p><p>Le chien aussi</b></p> vs. <p><b>Le chat dort.</b></p><p><b>Le chien aussi.</b></p>

Page 7: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

7

Let's start Un document XML commence par

<?xml version="1.0" encoding="iso-8859-1"?> Déclaration de DTD (grammaire) à choix

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> La spécification est stricte

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Plus compatible avec le HTML

– <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Pour les pages à frames (cadres multiples)

Page 8: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

8

Let's start (suite)

Toujours <html> </html> Attributs: (gras= obligatoire)

– xmlns="http://www.w3.org/1999/xhtml" namespace du document (identifie que les balises utilisées se réfèrent uniquement au XHTML et pas à d'autres types de docs XML)

– xml:lang et lang identification de la langue du document (redondant): fr, en, es, de, it, ar, ja, zh etc. Spécialisations possible: en-US, en-cockney, etc.

Page 9: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

9

En-tête <head> Pas d'attribut. Peut contenir

– <title> titre de la page telle que dans la barre de titre de fenêtre, pour bookmarks etc.

– <meta /> meta-information v. plus loin– <link /> lien avec feuille de style p. ex

• <link href="../../styles/latl.css" rel="stylesheet" type="text/css" />

– <script> code Javascript ou autre– <style> style inline– <base /> base pour le calcul des liens relatifs

• href="" base du lien• target="_blank" cible du lien

Page 10: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

10

Meta-information <meta name="author" content="John Doe" /> <meta name="copyright" content="&copy; 1997

Acme Corp." /> <meta name="keywords"

content="corporate,guidelines,cataloging" /> <meta name="date" content="1994-11-

06T08:49:37+00:00" /> <meta http-equiv="Expires" content="Tue, 20 Aug

1996 14:25:27 GMT"> <meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1" /> redondant avec <?xml version="1.0" encoding="iso-8859-1"?> mais pour compatibilité avec anciens browsers

<meta http-equiv="Refresh" content="12; url=http://www.unige.ch/" /> rafraîchit au bout de 12 secondes. Utile pour redirections

<meta name="robots" content="index, follow"> …

Page 11: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

11

Corps du document

<body> marque le corps du document Attributs

– background="" url d'une image– text couleur du texte– link couleur des liens– vlink couleurs des liens visités– alink couleur des liens actifs

On préfère définir ces choses dans une feuille de style

Page 12: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

12

Couleurs

Code RGB = Red Green Blue Signe # 6 chiffres hexas, 2 digits par couleur #000000 = noir = black #ffffff = blanc = white #ff0000 = rouge = red #0000ff = bleu = blue Etc.

Page 13: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

13

Les titres

Le titre du tag <title> inclus dans <head> n'est pas repris dans la page

<h1>, <h2> … <h6>, pour les différents niveaux (heading)

style du plus grand au plus petit Attributs

Voir section plus loin

Page 14: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

14

Divisions, paragraphes

<p> sert à désigner un paragraphe <div> permet de regrouper des blocs (p.ex.

plusieurs paragraphes) pour leur appliquer un même style. Peut aussi valoir comme marqueur de paragraphe

<span> permet de changer de style à l'intérieur d'un paragraphe

<address> sert à donner les coordonnées de l'auteur de la page

<br /> sert à insérer un saut de ligne

Page 15: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

15

Attributs de formatage align. Valeurs left, center, right, justify id identificateur, numérique ou autre

pour titre, paragraphe, lien, image… title titre pour liens, images,

headings etc. class référence à une classe de

feuille de style style style inline

Page 16: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

16

Commentaires Entre <!-- --> Comme dans la programmation peut servir à

désactiver du code Parfois pour du code interprété

– <!--#echo var="Last_modified" -->– <!--#include virtual="/info1/docbbox.html"-->

Parfois cache du code JavaScript pour des browsers archaïques– <script type="text/javascript"><!–-

function popup(link,framename){ window.open(link,framename, 'toolbar=0,location=0,directories=0,status=0,scrollbars=1,resizable=1,copyhistory=0,menuBar=0,width=740,height=520'); }

--></script>

Page 17: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

17

Exemple récapitulatif<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"

lang="fr"><head><title>Bookmarks</title><meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" /><link href="/styles/latl.css" rel="stylesheet" type="text/css"

/><base href="" target="_blank" /></head><body><h1 class="titre">Bookmarks pour le s&eacute;minaire</h1><div class="corps"><p>Blabla</p><p>Blabla</p></div><div class="evidence"><p>Citation

<span="rouge">importantissime</span> du professeur</p><p>Il est important d'apprendre le HTML par cœur</p></div><address>Dernière modification: 4.11.03</address></head></html>

Page 18: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

18

Format du texte Eléments de marquage du texte

– <em> (emphasis) mise en évidence (italiques)– <strong> mise en évidence plus forte (gras)– <cite> citation, référence à d'autres sources– <dfn> pour définition– <code> fragment de code informatique– <samp> échantillon (sample) de sortie de

programme, scripts etc.– <kbd> (keyboard) texte à entrer par utilisateur– <var> instance de variable de programme– <abbr> terme abrégé (http, www, Mass. etc.)– <acronym> (e.g., WAC, radar, etc.).

Page 19: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

19

Format du texte (2)

<sup> pour mise en exposant (superscript) <sub> pour indices (subscript) <b> pour gras (bold) <i> pour italiques <u> pour souligné (underline) <tt> pour teletype (courrier) <big>, <small>, <strike> et <s>

Page 20: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

20

Taille et police <font> pour changer la taille et la police Attibuts

– color pour modifier le style de couleur– size. Différentes tailles de 1 à 7, ou définir

relativement à taille par défaut: –1, 0, +1 etc.– face. Définit la police. Plusieurs dans la liste

par ordre de préférence. Seuls certaines polices sont reconnues univerelles (Times, Helvetica (Arial), Comic, Verdana, serif, sans-serif, courrier

<basefont> pour définir taille et police de base dans le <head>

De préférence utiliser les styles

Page 21: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

21

Marquer les modifications

<ins> et <del> permettent de marquer les insertions et effacements de passage de documents.– datetime="1994-11-05T08:15:30-05:00"

– title="Changed as a result of Steve B's comments in meeting."

Page 22: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

22

Blockquotes

<blockquote> sert à citer du texte– Attribut cite pour donner URI de la source– lang pour la langue– <blockquote

cite="http://racine.fr/andromaque/#1022">Pour qui sont ces serpents qui sifflent sur vos têtes?</blockquote>

Souvent utilisé pour indentation, mais cette pratique n'est pas recommandée– <blockquote><blockquote>Texte doublement indenté</blockquote></blockquotes>

Page 23: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

23

Citations. Barres horizontales

Citation dans le texte: <q> Possibilité d'emboîtement

– John said, <Q lang="en-us">I saw Lucy at lunch, she told me <Q lang="en-us">Mary wants you to get some ice cream on your way home.</Q> I think I will get some at Ben and Jerry's, on Gloucester Road.</Q>

Barre horizontale <hr />– size pour taille (épaisseur)– width taille en pixels ou en %

(width="50%")– noshade="noshade"– align = "left", "right"…

Page 24: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

24

Texte préformaté Texte préformaté <pre>

<p>Exemple de code HTML:</p><pre>&lt;html&gt;&lt;head&gt;&lt;title&gt;Exemple de code

HTML&lt;/title&gt;&lt;/head&gt;&lt;body&gt;lt;p&gt; Le ciel est

bleu&lt;/p&gt;&lt;p&gt;&lt;i&gt;La

mer&lt;/i&gt; &lt;b&gt;est verte!&lt;/b&gt;! &lt;/p&gt;

<b><i>texte formaté</i></b>&lt;/body&gt;&lt;/html&gt;</pre>

Exemple de code HTML:<html><head><title>Exemple de code

HTML</title></head><body><p>Le ciel est bleu</p><p><i>La mer</i> <b>est

verte!</b>!</p>texte formaté

</body></html>

Page 25: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

25

Exercice (http://www.latl.unige.ch/info3/ntic/dormeur.txt)

Le Dormeur du ValC'est un trou de verdure où chante une rivière

Accrochant follement aux herbes des haillons

D'argent; où le soleil, de la montagne fière,Luit : c'est un petit val qui mousse de rayons.

Un soldat jeune, bouche ouverte, tête nue,Et la nuque baignant dans le frais cresson bleu,Dort; il est étendu dans l'herbe, sous la nue,Pâle dans son lit vert où la lumière pleut.

Les pieds dans les glaïeuls, il dort. Souriant commeSourirait un enfant malade, il fait un somme :

Nature, berce-le chaudement : il a froid.

Les parfums ne font pas frissonner sa narine;Il dort dans le soleil, la main sur sa poitrine

Tranquille. Il a deux trous rouges au côté droit.

Arthur Rimbaud ©

Cahier de Douai, octobre 1870

Page 26: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

26

Listes Listes à puces <ul>

– type= "disc", "square","circle"– compact="compact"

Listes numérotées <ol>– type= "1", "A", "a", "i", "I"– start ="" (attention: tjs valeur

num.) Element de liste <li> (Anciennement <dir> et <menu> à

utiliser comme <ul>)

Page 27: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

27

Emboîtement Plusieurs niveaux emboîtables, types de liste

également (indentation des niveaux juste pour clarté visuelle, pas obligatoire)

<ul><li>Module AB3:</li><ol type="a">

<li>Cours JAVA</li><li>Cours de logique

formelle</li></ol>

</ul>

Page 28: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

28

Listes de définitions

Ouverture d'une liste <dl> Terme à définir <dt> Définition <dd><dl><dt>Impressionnisme</dt><dd>Courant de l’art pictural du XIXe siècle.

Peintres les plus connus: Van Gogh, Claude Monnet, Edouard Manet, Paul Cézanne…</dd>

<dt>Fauvisme</dt><dd>…</dd></dl>

Page 29: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

29

Liens

Créer un lien (sur image ou texte) <a> Paramètre href URI/URL de la page à

atteindre Uniform Resource Locator (URL) on

préfère parfois URI (Uniforme resource identifier)

Forme protocole: (//) location réseau / chemin/ fichier ; paramètres ? requête # fragment

Page 30: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

30

Protocoles http hypertext transfer protocol ftp file transfer protocol file fichier spécifique à l'hôte nntp news USENET gopher protocole d'accès fichiers telnet protocole ancien pour sessions

interactives prospero Prospero Directory Service wais Wide Area Information Servers

Protocol

Page 31: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

31

Règles particulières Lien vers une adresse email

mailto:[email protected] ftp://lhaire1:[email protected]

– Sinon ftp anonyme si nom machine simple Paramètre target pour spécifier la

cible (cadre)– _blank nouvelle fenêtre navigateur– _self même fenêtre, même cadre– _parent cadre niveau supérieur– _top même fenêtre dans la totalité

Page 32: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

32

Location réseau

Nom d'hôte– Un nom de machine www.unige.ch. La machine

doit être dans les DNS– Une adresse IP (Internet Protocol) 4 nombres

de 0 à 255 séparés par des points. Bientôt IP V6 6 nombres

Port TCP/IP lieu de connection logique parfois associée à un protocole particulier (20 ou 21 = ftp, 80 ou 8000 = http)

Page 33: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

33

Chemins relatifs Règles UNIX Nom de fichier seul le lien est dans le

même répertoire ../ un répertoire au dessous / le lien part de la racine du site ou du

chemin relatif <base href=""> définit la base de

calcul des chemins relatifs

Page 34: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

34

Ancre

Paramètre id ou name id utilisable dans d'autres balises

que <a> (ex. <h1> etc.) Eventuellement balise unique

– <a name="monAncre" />– <a name="sec3.1">3.1</a>

Lien vers ancre <a href="#monAncre">

Page 35: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

35

Types de lien rel et rev pointent sur nature du lien (rel lien

suivant, rev lien précédent. Possible d'avoir les 2 attributs en même temps). Valeurs :– Alternate version alternative du doc crt. (trad etc.)– Stylesheet– Start 1er doc d'une série– Next, Prev– Contents table matières– Index fichier d'index pour le doc crt.– Glossary– Copyright– Chapter, Section, Subsection– Appendix– Help– Bookmark signet dans grand doc.

Hypertexte avancé. Peut faire appel à des fonctions d'un browser plus sophistiqué.

Page 36: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

36

Autres attributs

charset spécifie le caractère du lien

type type MIME (text/html, application etc.)

Page 37: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

37

Images Insérer une image <img />

– Source de l'image (avec URI) src– Description alternative alt. Peut servir

comme indice car affiché si la souris survole l'image

– Taille en pixels width et height. Permet d'accélérer l'affichage du texte en cas de connexion lente

– Lien vers longue description (URI) longdesc– Espace autour hspace et vspace (pixels)– Bordure autour border (en pixels) border="0" si image sert de lien

– Alignement align= "bottom|middle|top|left|right|absmiddle|baseline|texttop|absbottom"

Page 38: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

38

Images cliquables

Deux techniques– Server-side attribut ismap="ismap" dans <img /> et lien autour de l'image avec <a> vers script cgi

– Client-side <map name="xxx"> et <img usemap="xxx" src=""/>• <area href=""> définit les liens, inclus dans <map>

– Attribut shape="rect|circle|polygon|default"– Attribut coords="xx,yy,zz"

Page 39: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

39

Tableaux Clé de toute mise en page (p. ex aussi

tabulations Élément <table> Légende de tableau <caption> Nouvelle ligne de tableau (table row) <tr>

Nouvelle cellule de tableau (table data) <td>

Cellules de titre (table head) <th>

Page 40: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

40

Exemple simple<table>

<caption>Ventes</caption>

<tr><th>Mois</th><th>CH</th><th>UE</th><th>Autres</th></tr>

<tr><th>Janvier</th><td>3,2</td><td>4,8</td><td>5,4</td></tr>

</table>

Page 41: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

41

Elément <table> border taille de bordure tableau en pixels width largeur du tableau en pixels ou % align alignement du tableau cellspacing espace entre cellules, pixels cellpadding espace à l'intérieur cellules summary résumé des données pour lecteur braille title titre du tableau id identificateur ancre bgcolor couleur de fond

Page 42: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

42

Elément <table> suite Attribut frame: espaces vides autour du tableau

– void (aucun, défaut)

– above (haut)

– below (bas)

– hsides (gauche et droit)

– lhs (left-hand side, côté gauche)

– rhs (right-hand side, côté droit)

– vsides (haut et bas)

– box ou border (partout)

Attribut rules: position où s'affiche bordure– none (nulle part)

– groups (entre groupes de lignes)

– rows (entre lignes)

– cols (entre colones)

– all (partout, défaut)

Page 43: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

43

Groupes de lignes Lignes d'en-tête <thead> Lignes de pied de page <tfoot> Corps du tableau <tbody> (après <tfoot>)

Contienent <tr> En-têtes et pied de page pourraient être

répétés à chaque page papier

Page 44: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

44

Groupes de colonnes Pratique pour définir un style Définir un groupe <colgroup>

– span définit le nombre de colonnes du groupe

– width taille des colonnes (% ou pixels) Définition de colonne <col> (mêmes

attributs ci-dessus)

Page 45: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

45

Cellules fusionnées

Pratique pour en-têtes Attribut colspan dans <td> ou <th>

étendue de la colonne Attribut rowspan dans <td> ou <th>

étendue de la ligne Il est facile de se perdre pour étendre

correctement les données

Page 46: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

46

Alignement dans cellules

Dans <tr> <td> <th> <tbody> <tfoot> <thead> <colgroup> <col>

Alignement horizontal align– left, center, right, justify– align="char" char="."

Alignement vertical valign– top, middle, bottom– baseline tous les contenus alignés sur

la même ligne de base

Page 47: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

47

Associer en-tête et cellule Utile pour des synthétiseurs vocaux Méthode du lien

– ligne d'en-tête <th id="1">Nom</th>

– dans une cellule <td headers="1">Toto</td>

Autre méthode– <th scope="col" abbr="nom">Nom de l'enseignant</th>

un synthé lira: "nom Toto"

Page 48: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

48

Exemple récapitulatif<table width="80%" border="1" cellpadding="6"

id="monTab">

<caption><h4>Faculté des Lettres</h4></caption>

<thead><tr><th colspan="2" rowspan="2">Cours</th>

<th colspan="2">Enseignant</th></tr>

<tr><th>Nom</th><th>Bureau</th></tr></thead>

<tfoot><tr> <th>Intitulé</th><th>Salle</th>

<th colspan="2">Consultez le tableau des heures de réception au secrétariat</th></tr></tfoot>

<tbody><tr><td>NTIC</td><td>AB4</td><td>L'HAIRE Sébastien</td><td>L701</td></tr></tbody></table>

Page 49: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

49

Formulaires Pour interaction avec l'utilisateur Common Gateway Interface CGI Balise <form> qui peut contenir du texte et/ou

les champs– action lien vers l'URI du CGI qui traite du

formulaire – method manière de transmettre l'info

• get le contenu des formulaires est ajouté à l'URI spécifié dans action (chercher.cgi?nom=Toto)

• post le contenu est posté dans le corps de la requête http

– enctype type d'encodage

Page 50: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

50

Les champs (ou contrôles) A inclure dans <form> Pratiquement tous <input />

– type="text"– type="password"– type="file"

name="" nom unique qui sera transmis value="" valeur par défaut size="" largeur du champ maxlength="" longueur maximale de

l'input

Page 51: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

51

Checkboxes et radio

<input name="xx" type="checkbox" value="yy" />– checked="checked" optionnel– plusieurs contrôles avec même nom possible mais

pas même valeur– n'est envoyé au CGI que si sélectionné

<input name="xx" type="radio" value="yy" />– plusieurs valeurs nécessaires avec même nom– checked="checked" optionnel mais

recommandé (1er de la série par défaut)

Page 52: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

52

Boutons

Envoi du formulaire <input type="submit" value="Envoyer" />– name optionnel, envoye le contenu de value

Effacement <input type="reset" value="Effacer …" />

Image équivalent à submit<input type="image" src="" alt="" />

Autres boutons <input type="button" value="Effacer …" onclick="" />– nécessaire de définir action javascript

Page 53: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

53

Boutons suite

Aussi type <button /> name="" et value="" comme <input />

type= submit|button|reset

Page 54: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

54

Valeurs cachées Valeurs à transmettre que l'utilisateur n'a pas

besoin/droit de modifier <input type="hidden" name="xx" value="yyy" />

<form method="GET" action="http://www.google.com/search" target="google"> <input type="text" name="q" size=20 maxlength="255" value="" /> <input TYPE="hidden" name="hl" value="fr"/><input TYPE="hidden" name="as_dt" value="i" /> <input TYPE="hidden" name="as_sitesearch" value="www.latl.unige.ch" /><input type="submit" name="btnG" value="Recherche Google" /> </form>

Page 55: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

55

Sélection Pour sélectionner valeur (= ComboBox) <selection>– name=""– size="" nombre d'éléments visibles en même

temps– multiple="multiple" sélection multiple

possible <option> inclut les options possibles

– value="" valeur à transmettre (si absent, envoie la valeur incluse dans option

– selected="selected"

Page 56: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

56

Groupement dans sélection <optgroup> permet de regrouper <option>– label="" nom du regroupement– rendu par des décalages dans la boîte ou par une

représentation de type menu <select name="select">

<optgroup label="Partie 1">

<option value="1.0">0. Intro</option>

<option value="1.5">5. Plan</option>

</optgroup>

<optgroup label="Partie 5">

<option value="5.1">1. Conclusion</option>

<option value="5.2">2. Remerciements</option>

</optgroup></select>

Page 57: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

57

Textes longs

Textes longs, multilignes <textarea> name="" nom du champ rows et cols nombre de caractères pour

dimension du champ on voit attribut nowrap="nowrap" ou wrap= OFF|VIRTUAL| PHYSICAL mais pas recommandé

A l'intérieur du tag: texte à afficher par défaut

Page 58: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

58

Etiquettes et légendes Etiquette de champ <label>

– for ref. à l'attr. id du champ Regroupement de champs <fieldset> Légende d'un regroupement, inclus dans <fieldset>: <legend>

<fieldset><legend>Auteur</legend><label for="nom">Nom:&nbsp;</label>

<input id="nom" name="nom" type="text" />&nbsp;&nbsp;<label for="nom">Prénom:&nbsp;</label>

<input id="prenom" name="prenom" type="text" /></fieldset>

Page 59: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

59

Navigation dans formulaire

Les champs peuvent être numérotés par l'attribut tabindex="" (nombre) naviguer avec tabulateur

Shortcuts définissables par accesskey="" (caractère) la lettre est soulignée, accessible par Alt + car

Page 60: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

60

Frames Cette pratique est décriée par certains Document contient<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<title>Titre du cadre entier</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

Page 61: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

61

Définir les séparations

Balise <frameset> englobable dans d'autres cadres– cols ="" pour colonnes, rows="",

contient tailles en pixels ou %, * comme wildcard

– pas d'autres attributs!

Page 62: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

62

Définir un cadre Donner un nom au cadre et l'URI affiché

au chargement <frame />– name="", id="" double définition d'un

nom– src="" URI du contenu– frameborder = 1 ou 0– noresize="noresize" empêche modif– lien <a href="" target="nom_frame">

Page 63: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

63

Pour les browsers anciens

Page à afficher pour les browsers qui ne peuvent (veulent) pas afficher les frames <noframe>

Contenu dans <frameset> Doit contenir <body>

Page 64: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

64

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" > <?xml version="1.0" encoding="iso-8859-1" ?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head>

<title>Titre du cadre entier</title><meta http-equiv="Content-Type" content="text/html;

charset=iso-8859-1" /></head><frameset rows="50,*,50">

<frame name="top" id="top" src="top.html" /><frameset cols="20%,*"> <frame name="menu" id="menu" src="menu.html" /> <frame name="content" id="content" src="a.html" /> </frameset><frame name="bottom" id="bottom" src="bottom.html" />

<noframes><body><p>Votre navigateur ne supporte pas les frames</p></body></noframes>

</frameset></html>

http://www.latl.unige.ch/info3/ntic/frames/

Page 65: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

65

Evénements souris

Dans de nombreux tags, on peut insérer attributs et faire référence à des commandes Javascript

options de clic: onclick, ondblclick options de bouton: onmousedown, onmouseup

mouvement de souris:– curseur approche ou quitte la zone: onmouseover, onmouseout

– curseur bougé dans la zone: onmousemove

Page 66: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

66

Autres événements

Chargement / déchargement document (<body> et <frameset>) onload, onunload

L'élément reçoit / perd le focus par souris ou tabbing (<a>, <area>, <button> <label>, <input>, <select>, <textarea>): onfocus, onblur

Evénements clavier: onkeypress, onkeydown, onkeyup

Page 67: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

67

Autres événements (suite)

Evénements de formulaire: – envoi, effacement: onsubmit, onreset– texte sélectionné dans <input> ou <textarea>: onselect

– modification apportée à un champ, intervient après perte focus: onchange

Page 68: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

68

Objets

Plus de tag <applet> Tag <object> pour inclusion d'objets

génériques (images, applets, lecteur audio/ video)

Le texte à l'intérieur est affiché par browsers qui ne supportent pas l'inclusion d'objets

<param> pour les paramètres

Page 69: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

69

Styles

Cascaded Style Sheets CSS 2.1, pour HTML et XML

Feuille de style interne <style type="text/css"> voire attribut style dans la plupart des tags

Feuille externe <link href="../../styles/latl.css" rel="stylesheet" type="text/css" />

Référence: http://www.w3.org/

Page 70: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

70

Modèle de document

Document représenté sous forme arbrehtml

head body

title meta …div

h2

h1 h1

div

p p ol

Page 71: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

71

Utiliser les styles 2 possibilités:

– redéfinir propriétés pour un tag• h1 {color: #ff0099;}

– définir une classe pour un tag particulier ou classe générale

• h1.titre {text-align: center; font-size:xx-large; margin-bottom:15px;}

• .citation {color:red; font-style:italic;}– <h1 class="titre">Info 1</h1>– <p class="citation">Ô rage, ô désespoir…</p>– <p><span class="citation">"Ich bin ein Berliner"</span>, a dit Kennedy en 1961.</p>

Page 72: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

72

Syntaxe Regrouper les tags h1, h2, h3 {}; h1{color:red;} p{…} h1{font-size=20pt}

équivaut à h1{color:red; font-size=20pt} symbole * correspond à tous les tags E F s'applique à un tag F descendant

d'un tag E E > F s'applique à F fils de E E + F s'applique à F précédé de E

Page 73: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

73

Syntaxe (suite)

Pseudo-classes:– E:first-child le premier E fils de son père– E:link, E:visited quand E est lien ou lien

visité– E:active, E:hover, E:focus E lors de

certaines actions (actif, avec pointeur souris, avec focus)

– E:lang(l) E avec code de langue

Page 74: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

74

Syntaxe (suite)

E[toto] E avec attribut toto, quelle que soit sa valeur

E[toto="tata"] E avec l'attribut toto exactement équivalent à tata

E[toto~="tata"] E avec attribut toto contenant des valeurs séparées par espace dont une est tata

E[lang|="fr"] E avec attribut lang= fr ou fr- et sous-groupe de langue

E#myid E avec attribut id= myid.

Page 75: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

75

Quelques exemples

.warning ou *.warning tous les tags avec class="warning"

div p *[href] tous les tags avec attribut href inclus dans un p inclus dans un div

h1 + h2 { margin-top: -5mm }, h1.opener + h2 { margin-top: -5mm } réduit la marge de tags consécutifs

Page 76: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

76

Quelques propriétés font-size:x-large; ou font-size:20pt; font-style:normal | italic | oblique …; font-variant: normal | small-caps … font-weight: normal | bold… font-family: serif (Times) sans-serif (Helvetica) cursive (Zapf-

Chancery) fantasy (Western) monospace (Courier)

text-align text-decoration:none | underline …; color, background-color margin:2em; (marge gauche)

Page 77: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

77

Tailles et longueurs

Relatives– em taille proportionnelle à la taille de la police

utilisée– ex taille relative à la minuscule de la police– px pixels, taille relative à l'appareil (écran,

projecteur, imprimante…) Absolues

– in, cm, mm pouces, centimètres, milimètres– pt point, 1/72 pouce– pc pica, 12 points

Page 78: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

78

Pseudo-éléments

:before et :after– propriété content: "texte entre guillemets"

– q:before { content: open-quote; color: red }

first-line style appliqué à la 1e ligne first-letter 1ere lettre

Page 79: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

79

Bon à savoir

Possibilité de définir très précisément une position

Possibilité de définir barre menu toujours présente

Compteurs pour numérotation de paragraphes, autres etc.

Page 80: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

80

Accentuation et internationalisation Code de caractères Unicode (ou UTF-8)

http://www.unicode.org/charts/ Entités SGML commencent par & et finissent

par ; on remplace la séquence 1er caractère = lettre à accentuer (maj

ou min) Ensuite, codes acute, grave, circ, uml, cedil, tilde, etc.

Ex: &Eacute; &ntilde; &ccedil;

Page 81: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

81

Deuxième notation

&# et code numérique &#x et code hexadécimal sur 4 digits,

en minuscules Unicode souvent noté U+ code sur 4

digits &#233; = &#x00e9; = U+ 00E9 = é Attention: O &#x039f; (grec)

&#x041e; (cyrillique) etc.

Page 82: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

82

Quelques caractères spéciaux

&#x00a2;&cent;¢&#x0024;-$

&#x00a3;&pound;£&#x00a5;&yen;¥

&iexcl;

&iquest;

&gt;

&lt;

&nbsp;

&reg

&trade;

&copy;

&euro;

&orda;

&ordo;

&not;

&amp;

&quot;

&raquo;

&laquo;

&#x20ac;€&#x00a1;¡

&#x00aa;ª&#x00bf;¿

&#x00ba;º&#x003e;>

&#x00ac;¬&#x003c;<

&#x0026;&&#x00a0;Esp. inséc

&#x0022;"&#x00ae;®

&#x00bb;»&#x2122;™

&#x00ab;«&#x00a9;©

Page 83: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

83

Texte bidirectionnel Dans certains tags <q>, <p>, <span>, etc.

attribut dir="ltr" ou dir="rtl", si possible conjointement avec lang

Unicode spécifie généralement la direction Le tag <bdo> permet de forcer la direction

du texte– <bdo dir="rtl">le chat dort</bdo>

Voir http://www.latl.unige.ch/info3/ntic/test1.html avec différents browsers, différents OS

Page 84: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

84

Unicode vs. anciens codes…

Internet Explorer n'affiche pas tous les caractères

Mozilla semble conforme à Unicode Anarchie règne entre codes de

caractères concurrents, OS etc. Ne pas oublier au moins de spécifier la

langue principale

Page 85: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

85

Annotations avec <ruby>

Texte annoté pour indiquer la prononciation (chinois, japonais)

Utilisable pour d'autres usages (linguistique, traductions…)

La base donne le texte à commenter Texte(s) de commentaire en polices de

très petite taille Compatible Explorer, pas Mozilla

Page 86: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

86

<ruby> suite

Ouverture avec <ruby> Base avec <rb> Texte(s) avec <rt>

– <ruby> <rb>WWW</rb><rt>World Wide Web</rt> </ruby>

Parenthèses optionnelles <rp>. – <rp>(</rp>

Si incompatiblité: WWW (World Wide Web) Doc complète http://www.w3.org/TR/ruby/

Page 87: Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003.

Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML

87

Validation du code

Consortium W3 offre des validateurs de CSS et de HTML

A utiliser pour le TP http://validator.w3.org/ http://jigsaw.w3.org/css-validator/validator-uri

.html Exemple récapitulatif:

http://www.latl.unige.ch/info3/ntic/exemplexhtml/index.html