1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009.

Présentation au sujet: "1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009."— Transcription de la présentation:

1 1 HTML - XHTML Florence Petit Université Paris-Est Marne-la-Vallée 24 novembre 2009

2 2 Page HTML et navigateur  Une page de site web est souvent un fichier HTML (extension.htm ou.html).  Le fichier est écrit en code HTML ou XHTML (code source).  Le fichier comporte du texte et du marquage de texte.  Il peut être visualisé dans un navigateur.  Un navigateur est un logiciel qui : -reconnaît le marquage (X)HTML grâce à un analyseur syntaxique (ou Parser) -le transcrit en document structuré et l'affiche.  Un navigateur est un agent-utilisateur (user-agent).

3 3 (X)HTML : HTML et XHTML  Langages standards de documents pour le web HTML : HyperText Markup Language Langage de marquage hypertexte XHTML : eXtensible HyperText Markup Language Langage de marquage hypertexte extensible  Langages avec des commandes sous forme de balises  Balise (tag) : élément encadré de chevrons texte

4 4 HTML : origine  Créé en 1989, publié en 1991 par Tim Berners-Lee au CERN  Issu du métalangage SGML né en 1986  Famille des langages de marquage (ou balisage) : HTML, XHTML, SGML, XML…

5 5 World Wide Web Consortium  En abrégé : W3C  http://www.w3.org http://www.w3.org  Ensemble d'organisations, instituts et entreprises intervenants dans le Web  Créé en octobre 1994 (directeur : Tim Berners-Lee)  Missions : Conduit les développements du web, gère son évolution et garantit son interopérabilité Définit les spécifications du web ("recommandations") Assure la promotion des technologies du web : HTML, CSS, XML, RDF, PNG, SVG, SOAP…

6 6 Evolution du HTML vers le (X)HTML  1991 : HTML  1995 : HTML 2  1996 : CSS 1  1997 : HTML 3.2 (pas de v.3)  1997 : HTML 4 (HTML + CSS)  1998 : CSS 2  1999 : HTML 4.01  norme ISO/IEC 15445:2000  2000 : XHTML 1  Reformulation du HTML en XML  2001 : XHTML 1.1  XHTML 1 strict)  2009 : Vers (X)HTML5 et non XHTML2 Evolution des navigateurs IE Safari FireFox Mozilla SeaMonkey...

7 7 (X)HTML et CSS (X)HTML  Structure du contenu titres, sous-titres paragraphes listes tableaux liens... CSS  Mise en forme couleurs polices, taille alignement de texte position des éléments...

8 8 (X)HTML : balise et élément Exemples : Texte d'un paragraphe Titre d'un paragraphe d'en-tête Balise balise ouvrante : balise fermante : Elément : terme employé dans 2 sens : nom de la balise ex : élément p unité structurante du document balise ouvrante + contenu + balise fermante

9 9 Emboîtement sans Chevauchement texte sans gras texte en gras texte en gras texte sans gras NONNON OUIOUI OUIOUI texte gras italique texte sans gras texte gras texte gras texte sans gras NONNON

10 10 Elément et attributs  Attribut : paramètre précisant un élément ...  Exemples : Texte du paragraphe  Placé dans la balise d'ouverture, mais jamais dans la balise de fermeture  Ordre des attributs sans importance syntaxique.

11 11 Attributs génériques  S'appliquent à (presque) toutes les balises  id : identifiant unique d'un élément dans le document  class : pour associer une classe (une "catégorie") à l'élément  title : titre (affiché souvent sous forme de post-it)  Choix des valeurs d'id, class et name : Lettre (min ou maj) au début puis lettres ou chiffres ou signes - _ :. Ne pas débuter par un chiffre Pas d'espace !  Exemple : ….

12 12 XHTML et élément vide  Elément avec contenu : contenu  Elément vide en HTML : ou  Elément vide en XHTML : Exemples :  Exemples : br, hr, img, input, meta… Simplification de l'écriture : <element></element> <element /element> <element />

13 13 Différences XHTML-HTML  Eléments et attributs en minuscules au lieu de  Balise de fermeture obligatoire (élément non vide) … … …  Elément vide au lieu de ou  Guillemets "..." (ou simple quote '...') autour des valeurs d'attribut : attribut="valeur" au lieu de  Valeur d'attribut obligatoire checked="checked" au lieu de checked  id remplace l'attribut name : - dans a, applet, form, frame, iframe, img, map,… - mais name reste utilisé dans input, select…

14 14 Balises et attributs généraux Structure générale DTD Balises de commentaire Attributs génériques

15 15 Structure simplifiée d'un document HTML Taper le titre Taper ici le contenu du document…

16 16 DTD ou doctype  DTD ou "doctype" : Document Type Definition Déclaration de Type de Document : grammaire du langage (éléments, attributs)  Détail sur : http://www.alsacreations.com/article/lire/560-dtd-html- xhtml-comment-choisir.html

17 17 (X)HTML et DTD  DTD HTML 4.01 Strict ni frame (cadre), ni d'éléments dépréciés. Transitional ou loose éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….) Frameset accepte frames et éléments dépréciés  DTD XHTML 1.0 Strict ni frame (cadre), ni d'éléments dépréciés. Transitional éléments dépréciés en XHTML (font, s, u, dir, strike, applet, center….) Frameset accepte frames et éléments dépréciés  DTD XHTML 1.1 correspond + ou - au XHTML1.0 Strict

18 18 Structure d'un document XHTML1.1 …… ….

19 19 Structure d'un document XHTML1.0 strict <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> …… ….

20 20 Structure d'un document HTML4 strict …… ….

21 21 Structure d'un document HTML4 transitionnel …… ….

22 22 A quoi sert la DTD ?  à pouvoir vérifier le code (X)HTML au validateur  Avec DTD, les navigateurs appliquent le rendu correspondant à la DTD (mode Standards).  Sans DTD reconnu, les navigateurs (IE, Firefox, Opera…même de dernière génération) passent en mode Quirks (bizarreries) ou mode compatibilité, afin de pouvoir interpréter les "vieux" codes.

23 23 DTD et validation Un validateur permet de vérifier la syntaxe d’un document HTML (X)HTML http://validator.w3.org/

24 24 Commentaire de code <!-- tapez ici le commentaire sur plusieurs lignes si besoin -->

25 25 Balises situées dans l'en-tête...

26 26 …  Située dans la partie …  Située avant la partie …  Partie qui contient des méta-informations titre de la fenêtre du document jeu de caractères utilisé mots-clés description (résumé) du document ….

27 27 Codage des caractères  Code ASCII -> sur 7 bits, 128 caractères (dont 95 affichables) -> Pas de caractères diacritiques..  Jeux de caractères (charsets) -> ASCII étendu -> sur 8 bits (256 caractères ) Plusieurs jeux de caractères selon la langue et ses accents (ex du latin 1 : iso-8859-15) … -> UTF8 (sur 1 ou 2 octets) - 0 devant le codage des caractères ASCII - 1 + 15 bits (32768 caractères) plus long à traiter, plus de volume

28 28 Entités et caractères spéciaux Caractèreentité valeur décimale < < < > > > » » » (espace insécable)   & & & " " " Ê Ê Ê ûû û è è è é é é ï ï ï ç çç ñ ññ œ œ œ · · © ©© €€ € Indépendance texte / plateforme

29 29 Déclaration du jeu de caractères  Doit correspondre à l'encodage du fichier (cf. éditeur de texte)  Caractères latins (Europe occidentale)  Caractères latin avec symbole €, œ...  Caractères Unicode

30 30 Les problèmes d’accents…  Document encodé en UTF-8 lu en ISO-8859-15 caractères accentués -> é  Document encodé en ISO-8859-15 lu en UTF-8 caractères accentués -> ?

31 31 Problème du saut de ligne dans les éditeurs  Caractères ASCII non imprimables, de contrôle CR (Carriage Return ou retour chariot) : code 0D (13) LF (Line Feed ou saut de ligne) : code 0A (10)  Passage à la ligne dans un fichier texte : UNIX : LF (\n caractère d'échappement New line) Windows : CR LF (\r\n) Mac OS (<X) : CR  Notepad ne sait pas interpréter un LF seul. Wordpad sait interpréter un LF seul.  Lors du transfert en mode ASCII, une conversion est effectuée, alors que lors du transfert binaire, rien n'est modifié dans le fichier.

32 32 Titre de document  Ceci est le titre  placé dans la partie  placé après la déclaration du jeu de caractères utilisé  titre de la fenêtre du navigateur  signets (favoris, marque-pages, bookmarks).  pris en compte par les moteurs de recherche

33 33 Balises meta name cf.Dublin Core

34 34 Balises meta et langues

35 35 meta http-equiv  Rafraîchissement de la page <meta http-equiv="refresh" content="60" />  Redirection de page <meta http-equiv="refresh" content="5 ; url=http://www.truc.fr/fic.htm" />

36 36 Feuille de style CSS externe liée: link  Pour tous périphériques de sortie

37 37 Feuilles de style CSS adaptées  Pour différents périphériques de sortie

38 38 Balises situées dans le corps...

39 39 …  Doit contenir au moins un élément bloc  Ne doit pas contenir directement d'éléments inline  Attributs dépréciés remplacés par les styles CSS bgcolor (fond) background (image de fond) color (texte normal) link (lien non cliqué) vlink (lien visité ou cliqué) alink (lien actif, au moment du clic)

40 40 Elément bloc / Elément en ligne (in-line) Bloc Placés par défaut les uns en dessous des autres. -> structure div, h1,… h6, p, ul, ol, dl, dt, dd, form, table, tr, blockquote, pre… Une boîte jaune >Une boîte verte En ligne Placés par défaut les uns à côté des autres. - Non remplacé (sans dimension): span, em, strong, a, q, abbr, acronym… - Remplacé (avec dimensions): img, input, textarea, select, object Une boîte jaune >Une boîte verte

41 41 Balises de textes en-ligne

42 42 Balises physiques / Balises logiques  Balises physiques texte en italique texte en gras (bold)  Balises logiques (sémantiques) emphase (italique) renforcement (gras)

43 43 Balises physiques de texte gras italique gros petit police à chasse fixe Balises dépréciées à éviter rayé souligné Balises propriétaires à éviter texte défilant texte clignotant

44 44 Balises logiques de texte portion de texte, texte en-ligne neutre BD OVNI mise en évidence (italique) forte mise en évidence (gras) indice exposant Brève citation en ligne source de la citation texte de droite à gauche exemple de code (police fixe) définition (italique) entrée clavier (police fixe) caractères littéraux (police fixe) nom de variable (italique)

45 45 Balises logiques de ligne Au survol : Légende de l'abréviation ou de l'acronyme

46 46 Balises "inline" de type remplacées Images Objets Applet

47 47 Image Attributs possibles : width ="300" largeur en pixels height ="200" hauteur en pixels alt="" s'il n'y a pas de texte alternatif URL : en général, chemin et nom du fichier Mettre la taille réelle de l'image améliore le temps d'affichage Eviter de redimensionner l'image dans le code HTML car son poids réel reste le poids du fichier. Attributs dépréciés, remplacés par CSS : border vspace hspace align

48 48 Formats d'images FormatNb couleurs max CompressionNb couleurs de transparence Animation GIF256Sans perte1Oui PNG16,7 millions Sans perte256Non JPG16,7 millions Avec perte0Non

49 49 Carte-image réactive côté client Insertion de l'image Description de la carte réactive y1 x1 x2,y2 x,y r En cas de superposition, la première zone définie l'emporte.

50 50 Balises situées dans le corps de texte Mise en forme - saut de ligne - ligne horizontale

51 51 Saut de ligne Ce texte est à la ligne Eviter et Attribut déprécié (à remplacer par CSS) : Ce texte est à la ligne avec effacement à gauche

52 52 Ligne horizontale Attributs dépréciés : width size align noshade color

53 53 Balises de blocs de texte p h1 à h6 div blockquote pre

54 54 Principales balises de blocs  paragraphe  en-tête ou titre avec n de 1 à 6  division de texte en bloc "neutre"  Bloc de citation  texte préformaté  Les navigateurs mettent par défaut des marges autour de certains éléments de blocs : p, hn…

55 55 Les en-têtes hn texte de niveau 1 texte de niveau 2 texte de niveau 3 texte de niveau 4 texte de niveau 5 texte de niveau 6

56 56 Texte préformaté  Bloc de texte préformaté  Police à chasse fixe  Saut de ligne conservé  Eviter les tabulations  Supporte CSS

57 57 Les listes liste non ordonnée (à puce) liste ordonnée (numérotée) liste de définition

58 58 Les listes liste à puce Terme 1 Terme 2 Liste à puce Terme 1 Terme 2 Liste numérotée 1.Terme 1 2.Terme 2 liste numérotée Terme 1 Terme 2 Attributs dépréciés, à remplacer par CSS Les navigateurs mettent par défaut une marge autour des listes

59 59 Listes emboîtées (nested) Une liste peut être incluse dans une autre. Asie Europe France Espagne Amérique ne pas mettre ici le mais à la fin de la liste imbriquée

60 60 Liste de définition Terme 1 Description du premier terme. La description peut continuer à la ligne suivante. Terme 2 Description du 2e terme. Attribut déprécié : Terme 1 Description du premier terme. La description peut continuer à la ligne suivante. Terme 2 Description du 2e terme.

61 61 Utilisation des blocs et des id/class

62 62 Utilisation de "div" : ni trop, ni trop peu  Exemple 1................  Exemple 2 item1 item2  Exemple 1 amélioré................  Exemple 2 amélioré item1 item2

63 63 Utilisation des "class" et "id" : ni trop, ni trop peu  Exemple 3 Chapitre 1  Exemple 4................  Exemple 3 amélioré Chapitre 1  Exemple 4 amélioré................

64 64 Tableaux table tr th td

65 65 Tableau simple :,, td> Langues anglais espagnol italien Nb 50 10 Attributs valides colspan rowspan Attributs dépréciés, remplacés par style CSS : align, valign, border, bgcolor, cellspacing, cellpadding Languesanglaisespagnolitalien Nb5010

66 66 Tableau avec résumé, légende, en-têtes Légende du tableau langues anglais espagnol italien Nb 50 10 Languesanglaisespagnolitalien Nb5010 Titre du tableau La balise se met juste après la balise Les navigateurs interprète en général le contenu de la balise d'en-tête de tableau en le mettant en gras centré

67 67 Tableau à groupe structurel de lignes Mois Montant - en euros Janvier 100 Février 80 Total 180 MoisMontant -En euros Janvier100 Février80 Total180 Ce tableau est mis en forme en associant des styles CSS aux et - thead en bleu gras - tfoot en italique gras

68 68 Tableau : Exemple en XHTML/CSS … … NomNote1Note2 Lise0615 Marc1011 Exemple avec style en ligne <col style="width:120px" span="2" … …

69 69 Tableau à groupe structurel de colonne … … … NomNote 1Note2moyenne Dupont121614

70 70 Tableau : bordures avancées <table frame="…" rules="…" border="..."> frame : emplacement des bordures void sans bordure abovebordure supérieure belowbordure inférieure hsides bordure sup et inf vsides bordure droite et gauche rhsbordure droite lhsbordure gauche box toutes les bordures border toutes les bordure rules : bordures intérieures alltous les traits internes noneaucun trait rowstraits entre lignes colstraits entre colonnes groupstraits entre colgroup entre thead, tbody, tfoot.

71 71 Liens

72 72 Syntaxe : lien hypermédia Si la source du lien est une image Lien Lien hypermédia Cible 1 Cible 2

73 73 Les protocoles portprotocoledésignation 80http://Web 443https://Web sécurisé file://Fichier local 21ftp://Téléchargement 70gopher://Gopher 23telnet://Connexion distante 25mailto:Courrier électronique nntp://News nntp 119news:Forums

74 74 Lien vers adresse électronique M'écrire M'écrire

75 75 Lien vers un site web site de l'université --> affiche la page par défaut du serveur index.htm, index.html, default.htm, default.html (selon le serveur) Lien vers un document spécifique du site web page du site de l'université remarque : Les noms de dossiers et de fichiers sont sensibles à la casse. Ouverture du document dans une nouvelle fenêtre <a href="http://www.univ-mlv.fr" target="_blank">site de l'université

76 76 Lien interne au site : adresse relative Par rapport au document courant lien Exemples (avec source dans WWW/dossier1/dossier2/page.htm) lien Par rapport à la racine du site lien Exemples à UPE-MLV lien WWW

77 77 Adresses absolues-relatives Lien vers une adresse absolue complète lien Adresse partielle relative au document (par défaut) lien Adresse partielle relative à la racine du site lien Base définie dans l'en-tête, valable pour les adresse du body (pas celles du head) Adresse relative à la base définie dans l'en-tête lien

78 78 Adresse relative au document WWW  langues  info  espagnol  anglais  bd   access.htm  sgbd.htm  ciudad.htm  index.htm  home.htm "home.htm" "../espagnol/ciudad.htm"  city.htm "../../index.htm" "info/bd/access.htm"  liste.htm "langues/liste.htm"  ordi.htm "../liste.htm"

79 79 Lien vers emplacement spécifique : Identifiant de fragment Vers chapitre 1 Vers chapitre 2… Chapitre 1 Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Chapitre 2 Et bla bla bla bla Chapitre 3 Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla Pour faire le lien : Vers chapitre 2 A l'endroit donné, on place un identifiant de fragment : Chapitre 2...... Chapitre3 Le 1 er caractère est une lettre (maj ou min) suivie facultativement de lettres, chiffres et - (tiret) _ (underscore) : (deux-points). (point)

80 80 Lien vers un identifiant de fragment  emplacement spécifique dans un document  marqué par une étiquette nommé identifiant de fragment Lien hypertexte Lien hypertexte

81 81 Adresse partielle …  Adresses des liens résolues en : http://etu.univ.fr/~login/anglais/book.htm http://etu.univ.fr/espagnol/libro.htm

82 82 Balises situées dans le corps de texte Formulaires

83 83 Formulaire : exemple

84 84 Formulaire : structure générale............... 2 méthodes : "get" ou "post" Ex : action="mailto:contact@fai.fr" action="mapage2.php" éléments du formulaire

85 85 Formulaire avec regroupement légende de la partie 1 partie avec textes et éléments de formulaire légende de la partie 2 partie avec textes et éléments de formulaire....

86 86 Zones de saisie de texte  Zone de saisie <input type="text" name="adresse" size="38" maxlength="38" value="valeur initiale" />  Mot de passe <input type="password" name="motpasse" size="10" maxlength="4" />  Zone invisible (information masquée)  Zone de saisie multiligne éventuellement contenu de la zone…. * *

87 87 Bouton radio - Case à cocher Bouton radio (choix exclusif) Case à cocher (choix non exclusif)

88 88 Liste déroulante et liste multiple  Liste déroulante mois Janvier … Avril …  Liste déroulante avec sous-parties Janvier......  Liste/menu à choix multiple...

89 89 Etiquette et formulaire  Etiquette de champ de formulaire Votre prénom : <input type="text" name="prenom" id="prenom2" size="20" maxlength="20" /> Votre prénom : <input type="text" name="prenom" id="prenom2" size="20" maxlength="20" />

90 90 Boutons divers remarque : coordonnées pt cliqué x, y / angle image Légende du bouton Légende du bouton Légende du bouton La légende du bouton peut être : - un texte éventuellement mis en forme : Texte du bouton - une image : - une combinaison des 2 : texte du bouton

91 91 Formulaire : envoi de données Syntaxe: name1=valeur1&name2=valeur2 Exemple: Nom=PETIT&Prenom=florence& mot-de-passe=1234& themes=musique+ classique& saison=%E9t%E9& envoyer=OK Remarque : & : sépare 2 valeurs + : représente un espace Codage des caractères : é codé en %E9

92 92 nom=Le+B%E9rard&prenom=Jean- ran%E7ois&sexe=h&mois=2&sports=ok&voyage=ok&transport=1&transport=2&codesecret=1234&comm entaires=Il+n%27y+a+pas+de+commentaire+%21&docu=ok avec enctype="multipart/form-data" ----------------------------7d438ce403fa Content-Disposition: form-data; name="nom" Le Bérard -----------------------------7d438ce403fa Content-Disposition: form-data; name="prenom" Jean-François -----------------------------7d438ce403fa Content-Disposition: form-data; name="sexe" f -----------------------------7d438ce403fa Content-Disposition: form-data; name="jour" 1 -----------------------------7d438ce403fa Content-Disposition: form-data; name="sports" ok -----------------------------7d438ce403fa Content-Disposition: form-data; name="voyage" ok ….

93 93 Balises de script

94 94 Bouton et gestion d'événement Quelle est la couleur du cheval blanc ? <input type="button" id="bouton-b" value="Blanc" onClick="alert('Oui, vous avez cliqué sur la bonne réponse');" /> <input type="button" id="bouton-n" value="Noir" onClick="alert('Non, vous avez cliqué sur la mauvaise réponse');" />

95 95 Script  dans un fichier externe (body) <script src="../mon_script.js" language="Javascript">  interne (head de pr é f é rence ou body) <!- - commentaire dissimulant le script instructions du script; // fin de dissimulation - - > Script non support é… remarque : conserver language car type="text/javascript;version=1.2"> est peu reconnu

96 96 Balises situées entre l'en-tête et le corps de texte Cadres : dépréciés

97 97 Cadres Ce site nécessite un navigateur qui puisse lire les cadres….

98 98 Arbre d'un document à cadre

99 99 Cadres <frame name="gauche" src="url" /> <frame name="droit" src="url" / >

100 100 Cadre et cible  Dans les pages avec des liens : texte1  ou dans l'en-tête  Noms de cible prédéfinis : –_blank : nouvelle fenêtre –_top : fenêtre sans cadre –_parent : fenêtre parente –_self : cadre courant (par défaut) texte1texte2

101 101 Les cadres : attributs <frame src="url" name="…" id="…" noresize="noresize" scrolling="yes|no|auto" marginheight="n" marginwidth="n" border="2" bordercolor="couleur" frameborder="1|0" / > Unités : 150 | 20% | 3*

102 102 Cadres Avantages  Menu persistant à l'écran, navigation facilitée  Rafraîchissement d'une partie d'écran Inconvénients  Pas d'adresse unique  Pb avec les signets  Pb avec les moteurs de recherche (page orpheline, non reliée à la page d'accueil)  Pb interprétation (braille…)

103 103 Iframes <iframe src="url" align="top|middle|bottom|left|right" frameborder="1|0" width="n|n%" height="h|h%" hspace="n" vspace="n" marginheight="n" marginwidth="n" id="nom" name="nom" scrolling="yes|no|auto"> Votre navigateur n'affiche pas les iframes

104 104 Editeur spécialisé HTML : Bluefish

105 105 Ergonomie -Lisibilité  Préférer les polices de type sans-sérif  Préférer texte sombre sur fond clair  Eviter de mettre un texte sur une grande largeur  Majuscules seulement pour sigles, débuts de phrase, débuts de nom propre.  Le souligné est réservé à l’hypertexte

106 106 Les pages web à UMLV  Créer dans votre dossier personnel un dossier WWW (en maj)  Mettez les brouillons de pages dans un autre dossier de travail, hors WWW, par exemple tp-web.  Les pages préparées et validées sont placés dans WWW.  Consulter à l'adresse : http://etudiant.univ-mlv.fr/~sonlogin éventuellement suivi du chemin  Si une page index.html existe à la racine de WWW, elle s'affiche en tapant etudiant.univ-mlv.fr/~sonlogin et votre nom apparaît sur la liste des pages web des étudiants.  La rubrique "Publier ses pages" permet de mettre des droits corrects sur WWW  Sinon faire un : chmod 704 nomfichier (droit de lecture) chmod 701 nomdossier(droit d'exécution) ou chmod 705 nomdossier (lister le contenu du dossier) ou chmod -R 705 WWW  Une URL relative à la racine du site est de type : /~login/sousdossierdeWWW/

107 107 DHTML  Dynamic HyperText Markup Language  Ensemble de technologies associées afin de fournir des pages HTML plus interactives -> contenu modifiable grâce à des événements.  HTML + script (javascript)  A ne pas confondre avec pages dynamiques (php, asp…)

108 108 Codage des couleurs  Code hexadécimal : #rrvvbb soit 1,678 millions de couleurs (256 R x 256 V x 256 B) par synthèse additive des couleurs  Quelques noms de couleurs tolérés, par exemple : Noir : black #000000 Blanc : white #ffffff Rouge : red #ff0000 Cyan : aqua #00ffff Gris : gray #808080 Argent : silver #c0c0c0 Vert olive : olive #808000

109 109 Exemple de code visualisé

110 110 Exemple de code HTML Mon titre Cellule Terme1 Terme2 Terme2-1 Terme2-2 Terme2-3 Mot Definition texte avec effet

111 111 Arbre hiérarchique d'un document xhtml

112 112 Code HTML à corriger Mon titre <link rel="stylesheet type=text/css" href="style.css" /> Cellule Introduction Terme1 Terme2 Terme2-1 Terme2-2 Terme2-3 Terme2-4 Légende de l'image paragraphe Mot Definition texte avec effet