Upload
perrine-pires
View
105
Download
0
Embed Size (px)
Citation preview
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
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
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
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>
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>
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)
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.
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
Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML
10
Meta-information <meta name="author" content="John Doe" /> <meta name="copyright" content="© 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"> …
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
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.
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
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
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
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>
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é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>
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.).
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>
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
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."
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>
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"…
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><html><head><title>Exemple de code
HTML</title></head><body>lt;p> Le ciel est
bleu</p><p><i>La
mer</i> <b>est verte!</b>! </p>
<b><i>texte formaté</i></b></body></html></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>
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
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>)
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>
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>
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
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
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é
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)
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
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">
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é.
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.)
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"
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"
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>
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>
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
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)
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
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)
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
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
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"
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>
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
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
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)
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
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
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>
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"
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>
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
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: </label>
<input id="nom" name="nom" type="text" /> <label for="nom">Prénom: </label>
<input id="prenom" name="prenom" type="text" /></fieldset>
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
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>
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!
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">
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>
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/
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
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
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
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
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/
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
…
…
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>
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
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
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.
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
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)
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
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
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.
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: É ñ ç
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 é = é = U+ 00E9 = é Attention: O Ο (grec)
О (cyrillique) etc.
Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML
82
Quelques caractères spéciaux
¢¢¢$-$
£££¥¥¥
¡
¿
>
<
®
™
©
€
&orda;
&ordo;
¬
&
"
»
«
€€¡¡
ªª¿¿
ºº>>
¬¬<<
&& Esp. inséc
""®®
»»™™
««©©
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
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
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
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/
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