Chapitre 7 extended HyperText Markup Language (XHTML)
Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML que sur le rendu visuel Liens intéressants (in English!) : http://www.w3.org/ http://www.w3schools.com/
Notions préliminaires Page HTML : métaphore pour fichier XHTML Extension :.html ou.htm Fichier de type texte Logiciel pour interpréter et visualiser le XHTML Navigateurs ou browser : Visuels, textuels, sonores, «robots» Langage à balisage combinant HTML et XML Fond + description structure logique du document Associer à des feuille de style (CSS) pour la forme Lien hypertexte pour «lier» une page à un fichier
Historique des normalisations HTML 2 (1995) HTML 3.2 : normalisation des tables HTML 4.0 : séparation de la description des pages et de leur(s) réalisation(s) par des feuilles de style XHTML 1.0 :concevoir une page HTML comme une application XML
Une application XML : le XHTML Ensemble d'éléments/attributs/valeurs prédéfinis pour la description de la structure des pages Web Trois types de documents XHTML : Strict : marquage propre à combiner avec les CSS Transitional : si navigateurs problématiques avec les CSS Frameset : si l'on veut partitionner la fenêtre en cadres Deux règles supplémentaires à retenir : Les éléments et attributs sont écrits en minuscule Les valeurs des attributs sont " " Je mets <strong> ceci </strong> en saillance. Je saute une ligne maintenant. <br/> Voici un petit texte <bdo dir="rtl"> que l'on peut croire en hébreu </bdo> Je mets ceci en saillance. Je saute une ligne maintenant. Voici un petit texte uerbéh ne eriorc tuep no'l euq
Structure d'un fichier XHTML Trois parties Le prologue : indique la DTD qui sera utilisée pour la validation du code et sa réalisation concrète à l'écran L'en-tête : contient des informations de services concernant le document Le corps du document : borne les informations concernant la partie qui sera visible dans le navigateur
Le prologue On utilis e la norme XHTML 1.0 S trict. Le prologue corres pondant es t : <?xml version="1.0" encoding="iso-8859-1"?> <!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">
L'entête (1) L'entête contient les informations de service : Le titre du document : <title>votre titre</title> C'est un élément obligatoire Correspond au texte qui apparaît sur la barre de fenêtre, ou dans les résultats des moteurs de recherche Essentiel pour la visibilité du document (référencement, moteurs de recherche, liens hypertextes pointant vers ce document,...). Les métadonnées : <meta name="description" content="ce texte de description doit apparaître à l'utilisateur dans les résultats du moteurs de recherche."/> <meta name="author" content="rené Toutfou"/> <meta name="keywords" content="html, Information Meta, programme de recherche, protocole HTTP"/> <meta name="date" content="2001-12-15t08:49:37+00:00"/> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
Entête (2) Un gabarit type de l'entête xhtml : <head> <title> le titre </head> <meta name="description" content="ce texte de description doit apparaître à l'utilisateur dans les résultats du moteurs de recherche."/> <meta name="author" content="rené Toutfou"/> <meta name="keywords" content="html, Information Meta, programme de recherche, protocole HTTP"/> <meta name="date" content="2001-12-15t08:49:37+00:00"/> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head>
Implications dans les pages Web Les navigateurs récents supportent UTF-8 et le détectent automatiquement dans les pages HTML Pas bien : «é» directement dans une page Web! Bien (3 possibilités) : Entités HTML (é) Laisser «é» mais préciser le charset dans une balise méta de l'entête (iso-8859-1 classiquement pour la plupart des langues latines ou occidentales) Travailler directement en UTF-8 dans l'éditeur s'il le permet (le préciser également dans une balise méta) : indispensable pour japonais, hébreu,...
finalement Gabarit xhtml strict minimum avec encodage iso-8859-1 : <?xml version="1.0" encoding="iso-8859-1"?> <!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"> </html> <head> <title>votre titre</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head> <body> </body> votre code
Les titres 7 niveaux de titre : élément <hx> avec x entre 1 et 7 Exemple : <h2>je suis un titre de niveau 2</h2>
Les divisions L'élément <div> permet de définir un segment de texte comme une section logique ; L'interprétation par le navigateur ne montre par défaut aucun effet visible lors de la visualisation. Sa prise en compte pourra être effectuée par les feuilles de style. Son utilisation provoque un retour à la ligne au niveau de la balise fermante : c'est par défaut un élément de bloc. Exemple d'utilisation : un sommaire
Les bloc génériques h1 à h7 : titres div : section logique p : paragraphe hr : ligne de séparation (autofermant) blockquote : citation pre : section preformatée br : saut de ligne (autofermant)
Les blocs de liste Liste non ordonnée : ul Liste ordonnée : ol Item d'une liste : li <ul> <li>... </li> <li>... </li> <li>... </li> </ul> <ol> <li>... </li> <li>... </li> <li>... </li> </ol>
Les blocs de définition Liste de définition : dl Terme défini : dt Données de la définition : dd <dl> <dt>...</dt> <dd>...</dd> <dt>...</dt> <dd>...</dd>... </dl>
Éléments inline Déconseillés (interdits dans le projet!) tt : texte Teletype i : texte en italique b : texte en gras big : texte plus gros small : texte plus petit Pas dans l'esprit mais inévitables sub : en indice sup : en exposant
Éléments inline Autorisés em : emphase strong : mise en saillance dfn : terme d'une définition code : lignes de code samp : exemple kbd : texte entré au clavier par l'utilisateur var : nom de variable cite : citation address : adresse
Élément inline span L'élément span permet de marquer un segment de texte quelconque. Ne produit aucune marque visible par défaut. Il faut l'associer à une feuille de style. Exemple d'utilisation : une lettrine <span>f</span>aire une lettrine.