docHTML - LITA
download 
Plainte Transcription
HTML - LITA
(X)HTML Internet et développement Web Qu’est-ce ? • • Un langage de structuration de textes • définit les parties d’un textes • chaque partie est entourée de balises • <truc> ouverture et </ truc> fermeture de la balise truc • < truc /> ouverture et fermeture en une seule fois (pour l’utilisation d’attributs) exemples : • <b> ... </b> définit un texte en gras • <i> ... </i> définit un texte en italique • <img src=”monImage.jpg” /> insère l’image monImage.jpg Le squelette • <! DOCTYPE> : le langage utilisé. • <html> ... </html> : le document. Utilise le langage du DOCTYPE. • <head> </head> : titre du document (obligatoire), son encodage, et autres informations (les méta-données). • <body> </ body> : le corps du document. La page proprement dite. Un exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple de fichier XHTML valide</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> Un texte normal <br /> <i> italique </ i> <ul> <li>un élément d’une liste</li> <li><b> du gras </b></li> </ul> </body> </html> Langage • Une DTD définit les balises que l’on a le droit d’utiliser. • analogie : dictionnaire • un fichier HTML doit être conforme • les balises doivent respecter certains critères • analogie : une phrase • les balises doivent être bien formées DTD • Document Type Definition • permet de définir les commandes autorisées • permet de vérifier que le texte est conforme (validateur W3C , Validateur W3Québec(en français)) • Syntaxe <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> • <html xmlns="http://www.w3.org/1999/ xhtml"> ... </ html> • 3 DTD principales • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • • attributs de présentation supprimés attributs de présentation là. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> • Avec des “frames”. à proscrire. Les frames c’est le mal Grammaire des balises 1/3 • les balises sont en minuscules • Faux : <BODY> </BODY> • exact : <body> </body> • ne doit posséder qu’un seul élément “racine” • <html> <head> ... </head> <body> ... </body> </html> Grammaire des balises 2/3 • Toute balise ouverte doit être fermée •<p> un paragraphe </p> •<br /> ET <img src=”./ toto.png” /> • Les balises doivent être correctement imbriquées • faux : <b><i> gras et en italique </b></i> • exact : <b><i> </i></b> gras et en italique Grammaire des balises 3/3 • les valeurs d’attributs sont sont toujours entre “ ” • Faux : <table width=100%> ... </ • table> exact : <table width=”100%”> ... </ table> • un attribut à toujours une valeur • faux : <input checked /> • exact : <input checked=”checked” /> HTML ou pas ? 1/2 • juste ? • </ p><p> • <p></p> • <P></P> • <P></p> • et lui ? • <p> Un <b><i>court</i></b> paragraphe • <p> Un <b><i>court</b></i> paragraphe</p> • <p> Un <b><i>court</i></b> paragraphe </p> XHTML ou pas ? 2/2 • attributs : • • • • • width=80 WIDTH=”80” WIDTH=80 width=”80” Retour à la ligne : • • • <br> <br /> <break/> • listes : • <ul> <li>Café</li> <li>Thé <ul> <li>vert</li> <li>noir</li> </ul></ li> <li>lait</li> <ul> Html non conforme <html> <head> <title>Exemple de fichier XHTML non valide</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <BODY> Il y a quelques erreurs XHTML dans ce document <br> <ul> <li>il manque le DOCTYPE <li>les balises BODY sont en MAJUSCULES <li>les balises meta et br ne sont pas fermées ; les balises li non plus, d’ailleurs ! <li>il manque les " " autour du <a ref=lien.html>lien</a> <li>& doit toujours être utilisé à la place de &, même dans les URL (<a ref="http://www.google.com/search?q=xhtml&n=100">exemple</a>) <li>le <i>chevauchement dans l’ouverture / fermeture de <b>BALISES</i></b> n’est pas correct. </ul> </html> </BODY> Le même, mais conforme <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple de fichier XHTML valide (mode transitional)</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> Il n’y a plus d’erreurs XHTML dans ce document <br/> <ul> <li>le DOCTYPE est présent</li> <li>les balises (body notamment) sont en minuscules</li> <li>les balises meta, br et li sont fermées</li> <li>les " " sont présents pour délimiter les attributs (comme dans ce <a ref="lien.html">lien</a>)</li> <li>& est utilisé dans l’URL <a ref="http://www.google.com/search?q=xhtml&n=100">suivante</a> </li> <li>le <i>chevauchement dans l’ouverture / fermeture de <b>BALISES</b></i> est correct.</li> </ul> </html> </body> Les types de balises 1/6 • les titres : de h1 à h6 • <h1>...</ • h1> <h6>...</ h6> • les paragraphes : <p>...</p> • retour à la ligne : <br /> Les types de balises 2/6 • strong : <strong> ... </ strong> • (remplace gras : <b> ... </b>) • emphasis (mise en valeur) : <em> • (remplace italique : <i> ... </em> ... </i>) • (ne pas utiliser souligné : <u> ... </u>) Les types de balises 3/6 • les listes • à puces : <ul> ... </ul> • numérotées : <ol> ... </ ol> • un item de liste : <li> ... </li> Les types de balises 4/6 • un tableau : <table> • une ligne : <tr> ... </table> ... </tr> • une cellule (dans une ligne) : • <td> ... </td> • un titre de colonne : <th> ... </ th> • attributs colspan ou rowspan Tableau exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exemple de fichier XHTML valide</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <table > <tr> <td rowspan = "3"></td><td></td><td></td> </tr> <tr> <td></td><td></td> </tr> <tr> <td colspan = "2"></td> </tr> </table> </html> </body> Tableau Résultat Les types de balises 4/6 • un tableau : <table> • une ligne : <tr> ... </table> ... </tr> • une cellule (dans une ligne) : • <td> ... </td> • un titre de colonne : <th> ... </ th> • attributs colspan ou rowspan Les types de balises 5/6 • • • les liens <a href=”URL”> ... </a> relatifs : entre pages d’un même site • <a href=”plus_bas/ ici.html”> click </a> • <a href=”../ autrepart/la.html”> click </a> externes : entre pages de sites différents • <a href=”http:// www.google.fr”> click </a> ici fichier.html plus_bas ici.html autrepart la.html Les types de balises 6/6 • les images <img src=“URL” /> • attributs indispensables : • texte alternatif : alt • dimensions de l’image : width et height L’entête : <head> </head> • titre de la page : <title> ... </title> • des méta-données • auteur : <meta name =”author” • content=”moi”/> • description (pour les moteurs de recherches) : <meta name =”description” content=”des choses sur moi”/> • ... l’encodage du texte : <meta httpequiv="content-type" content="text/html; charset=iso-8859-1" /> Exemple <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" / > <meta name="author" content="François Brucker" /> <meta name="keywords" content="publication,cours,cv,françois brucker,classification" /> <meta name="description" content="Page professionnelle de François Brucker. On y trouve ses publications, ses cours, plein d'autres trucs super" /> <meta name="robots" content="all" /> <title>page professionnelle de François Brucker</title> <style type="text/css" media="all"> @import "base.css"; @import "index.css"; </style> </head> L’entête : <head> </head> • titre de la page : <title> ... </title> • des méta-données • auteur : <meta name =”author” • content=”moi”/> • description (pour les moteurs de recherches) : <meta name =”description” content=”des choses sur moi”/> • ... l’encodage du texte : <meta httpequiv="content-type" content="text/html; charset=iso-8859-1" /> L’encodage des caractères • <meta • http-equiv="content-type" content="text/html; charset=iso-8859-1" /> • iso-8859-1 (iso-latin1) • iso-8859-15 (iso-latin9) • utf-8 Attention aux accents, ß, etc... Caractères spéciaux • HTML défini des caractères spéciaux, utilisable quelque soit l’encodage • certains peuvent être utiles : • é : é • &slig; : ß • © : © • : espace insécable • ... Texte et codes • Au départ était le code ASCII (American Standart Code for Information Interchange) • Puis viennent le tour des langues européennes ISO-LATIN1 • Enfin, l’utf-8 et toutes les langues du mondes (voir plus) Code ASCII 1/3 ASCII initial, sur 7 bits (de 0 à 127) Code ASCII 2/3 ASCII “étendu” sur 8 bits (un octet) ASCII art 3/3 Suffit pour faire des trucs sympa tout de même :-) Autres codages 1/2 • ISO-latin1 (256 caractères) • Unicode • plus de 120 000 caractères • utf-8 (universal transformation format) (RFC 3629) Travaux pratiques 2/2 • Hello ? • Et lui ? • U+0048 • U+0065 • U+0069 • U+006E • U+003F Travaux pratiques 2/2 D’autres glyphes unicode Caractères spéciaux • HTML défini des caractères spéciaux, utilisable quelque soit l’encodage • certains peuvent être utiles : • é : é • &slig; : ß • © : © • : espace insécable • ... La semaine prochaine...
