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

Présentation au sujet: "Code HTML / XHTML Sébastien L’haire Séminaire NTIC 2003- 2004 Université Genève - Fac. Lettres Novembre 2003."— Transcription de la présentation:

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

2 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

3 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

4 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: … –Paramètres ou attributs … Les retours de chariot n'ont aucun effet. Une page peut être sur une seule ligne

5 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 5 Squelette d'un document HTML Structure d'un doc html Mon titre … autres infos … le corps du doc

6 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 –,,,etc. Attributs toujours entre guillemets, y compris les chiffres Pas d'attributs sans valeurs – vs Croisements de balises interdits – Le chat dort. Le chien aussi vs. Le chat dort. Le chien aussi.

7 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 7 Let's start Un document XML commence par Déclaration de DTD (grammaire) à choix – La spécification est stricte – Plus compatible avec le HTML – Pour les pages à frames (cadres multiples)

8 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 8 Let's start (suite) Toujours 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.

9 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 9 En-tête Pas d'attribut. Peut contenir –  titre de la page telle que dans la barre de titre de fenêtre, pour bookmarks etc. –  meta-information v. plus loin – lien avec feuille de style p. ex – code Javascript ou autre – style inline – base pour le calcul des liens relatifs href="" base du lien target="_blank" cible du lien

10 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 10 Meta-information redondant avec mais pour compatibilité avec anciens browsers rafraîchit au bout de 12 secondes. Utile pour redirections …

11 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 11 Corps du document 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

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

13 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 13 Les titres Le titre du tag inclus dans n'est pas repris dans la page, …, pour les différents niveaux (heading) style du plus grand au plus petit Attributs Voir section plus loin

14 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 14 Divisions, paragraphes sert à désigner un paragraphe permet de regrouper des blocs (p.ex. plusieurs paragraphes) pour leur appliquer un même style. Peut aussi valoir comme marqueur de paragraphe permet de changer de style à l'intérieur d'un paragraphe sert à donner les coordonnées de l'auteur de la page sert à insérer un saut de ligne

15 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

16 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é – Parfois cache du code JavaScript pour des browsers archaïques – <!–- 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'); } -->

17 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 17 Exemple récapitulatif Bookmarks Bookmarks pour le séminaire Blabla Blabla Citation importantissime du professeur Il est important d'apprendre le HTML par cœur Dernière modification: 4.11.03

18 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 18 Format du texte Eléments de marquage du texte – (emphasis)  mise en évidence (italiques) – mise en évidence plus forte (gras) – citation, référence à d'autres sources – pour définition – fragment de code informatique – échantillon (sample) de sortie de programme, scripts etc. – (keyboard) texte à entrer par utilisateur – instance de variable de programme – terme abrégé (http, www, Mass. etc.) – (e.g., WAC, radar, etc.).

19 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 19 Format du texte (2) pour mise en exposant (superscript) pour indices (subscript) pour gras (bold) pour italiques pour souligné (underline) pour teletype (courrier),, et

20 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 20 Taille et police 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 pour définir taille et police de base dans le De préférence utiliser les styles

21 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 21 Marquer les modifications et 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."

22 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 22 Blockquotes sert à citer du texte –Attribut cite pour donner URI de la source –lang pour la langue – Pour qui sont ces serpents qui sifflent sur vos têtes? Souvent utilisé pour indentation, mais cette pratique n'est pas recommandée – Texte doublement indenté

23 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 23 Citations. Barres horizontales Citation dans le texte: Possibilité d'emboîtement –John said, I saw Lucy at lunch, she told me Mary wants you to get some ice cream on your way home. I think I will get some at Ben and Jerry's, on Gloucester Road. Barre horizontale –size pour taille (épaisseur) –width taille en pixels ou en % ( width="50%" ) –noshade="noshade" –align = "left", "right"…

24 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 24 Texte préformaté Exemple de code HTML: <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> texte formaté </body> </html> Exemple de code HTML: Exemple de code HTML Le ciel est bleu La mer est verte! ! texte formaté

25 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 25 Exercice (http://www.latl.unige.ch/info3/ntic/dormeur.txt) Le Dormeur du Val C'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 comme Sourirait 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

26 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 26 Listes Listes à puces –type= "disc", "square","circle" –compact="compact" Listes numérotées –type= "1", "A", "a", "i", "I" –start ="" (attention: tjs valeur num.) Element de liste (Anciennement et à utiliser comme )

27 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) Module AB3: Cours JAVA Cours de logique formelle

28 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 28 Listes de définitions Ouverture d'une liste Terme à définir Définition Impressionnisme Courant de l’art pictural du XIXe siècle. Peintres les plus connus: Van Gogh, Claude Monnet, Edouard Manet, Paul Cézanne… Fauvisme …

29 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 29 Liens Créer un lien (sur image ou texte) 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

30 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

31 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 31 Règles particulières Lien vers une adresse email mailto:lhaire@lettres.unige.ch ftp://lhaire1:monpassword@ftpnov.unige.ch –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é

32 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)

33 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  définit la base de calcul des chemins relatifs

34 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 34 Ancre Paramètre id ou name id utilisable dans d'autres balises que (ex. etc.) Eventuellement balise unique – – 3.1 Lien vers ancre

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

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

37 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 37 Images Insérer une image –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"

38 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 38 Images cliquables Deux techniques –Server-side attribut ismap="ismap" dans et lien autour de l'image avec vers script cgi –Client-side et définit les liens, inclus dans –Attribut shape="rect|circle|polygon|default" –Attribut coords="xx,yy,zz"

39 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 39 Tableaux Clé de toute mise en page (p. ex aussi tabulations Élément Légende de tableau Nouvelle ligne de tableau (table row) Nouvelle cellule de tableau (table data) Cellules de titre (table head)

40 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 40 Exemple simple Ventes Mois CH UE Autres Janvier 3,2 4,8 5,4 …

41 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 41 Elément 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

42 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 42 Elément 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)

43 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 43 Groupes de lignes Lignes d'en-tête Lignes de pied de page Corps du tableau (après ) Contienent En-têtes et pied de page pourraient être répétés à chaque page papier

44 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 44 Groupes de colonnes Pratique pour définir un style Définir un groupe – span définit le nombre de colonnes du groupe – width taille des colonnes (% ou pixels) Définition de colonne (mêmes attributs ci-dessus)

45 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 45 Cellules fusionnées Pratique pour en-têtes Attribut colspan dans ou  étendue de la colonne Attribut rowspan dans ou  étendue de la ligne Il est facile de se perdre pour étendre correctement les données

46 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 46 Alignement dans cellules Dans 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

47 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 Nom –dans une cellule Toto Autre méthode – Nom de l'enseignant un synthé lira: "nom Toto"

48 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 48 Exemple récapitulatif Faculté des Lettres Cours Enseignant Nom Bureau Intitulé Salle Consultez le tableau des heures de réception au secrétariat NTIC AB4 L'HAIRE Sébastien L701

49 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 49 Formulaires Pour interaction avec l'utilisateur Common Gateway Interface CGI Balise 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

50 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 50 Les champs (ou contrôles) A inclure dans Pratiquement tous – 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

51 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 51 Checkboxes et radio – 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é –plusieurs valeurs nécessaires avec même nom – checked="checked" optionnel mais recommandé (1er de la série par défaut)

52 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 52 Boutons Envoi du formulaire – name optionnel, envoye le contenu de value Effacement Image équivalent à submit Autres boutons –nécessaire de définir action javascript

53 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 53 Boutons suite Aussi type name="" et value="" comme type= submit|button|reset

54 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

55 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 55 Sélection Pour sélectionner valeur (= ComboBox) – name="" – size="" nombre d'éléments visibles en même temps – multiple="multiple" sélection multiple possible inclut les options possibles – value="" valeur à transmettre (si absent, envoie la valeur incluse dans option – selected="selected"

56 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 56 Groupement dans sélection permet de regrouper – label="" nom du regroupement –rendu par des décalages dans la boîte ou par une représentation de type menu 0. Intro 5. Plan 1. Conclusion 2. Remerciements

57 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 57 Textes longs Textes longs, multilignes 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

58 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 58 Etiquettes et légendes Etiquette de champ – for  ref. à l'attr. id du champ Regroupement de champs Légende d'un regroupement, inclus dans : Auteur Nom: Prénom:

59 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

60 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 60 Frames Cette pratique est décriée par certains Document contient Titre du cadre entier

61 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 61 Définir les séparations Balise englobable dans d'autres cadres – cols ="" pour colonnes, rows="", contient tailles en pixels ou %, * comme wildcard –pas d'autres attributs!

62 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 – name="", id="" double définition d'un nom – src="" URI du contenu – frameborder = 1 ou 0 – noresize="noresize" empêche modif –lien

63 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 Contenu dans Doit contenir

64 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 64 Titre du cadre entier Votre navigateur ne supporte pas les frames http://www.latl.unige.ch/info3/ntic/frames/

65 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

66 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 66 Autres événements Chargement / déchargement document ( et ) onload, onunload L'élément reçoit / perd le focus par souris ou tabbing (,,,,, ): onfocus, onblur Evénements clavier: onkeypress, onkeydown, onkeyup

67 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 ou : onselect –modification apportée à un champ, intervient après perte focus: onchange

68 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 68 Objets Plus de tag Tag 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 pour les paramètres

69 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 voire attribut style dans la plupart des tags Feuille externe Référence: http://www.w3.org/http://www.w3.org/

70 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 70 Modèle de document Document représenté sous forme arbre html head body title meta … div h2 h1 div pp ol … …

71 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;} – Info 1 – Ô rage, ô désespoir… – "Ich bin ein Berliner", a dit Kennedy en 1961.

72 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

73 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

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

75 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

76 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)

77 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

78 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

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

80 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: É ñ ç

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

82 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 82 Quelques caractères spéciaux ¢¢ ¢ $- $ ££ £ ¥¥ ¥ ¡ ¿ > < &reg ™ © € &orda; &ordo; ¬ & " » « € € ¡ ¡ ª ª ¿ ¿ º º > > ¬ ¬ < < & &   Esp. inséc " " ® ® » » ™ ™ « « © ©

83 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 83 Texte bidirectionnel Dans certains tags,,, etc. attribut dir="ltr" ou dir="rtl", si possible conjointement avec lang Unicode spécifie généralement la direction Le tag permet de forcer la direction du texte – le chat dort Voir http://www.latl.unige.ch/info3/ntic/test1.html avec différents browsers, différents OS

84 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

85 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 85 Annotations avec 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

86 Novembre 2003 Séminaire NTIC (C) UNIGE - Cours HTML-XHTML 86 suite Ouverture avec Base avec Texte(s) avec – WWW World Wide Web Parenthèses optionnelles. – ( Si incompatiblité: WWW (World Wide Web) Doc complète http://www.w3.org/TR/ruby/

87 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 http://jigsaw.w3.org/css-validator/validator- uri.html Exemple récapitulatif: http://www.latl.unige.ch/info3/ntic/exemplexht ml/index.html