doc• Balises de structure • Balises de mise en forme • Balises de liens
download 
Plainte Transcription
• Balises de structure • Balises de mise en forme • Balises de liens
Les balises XHTML • • • • • • • • Balises de structure Balises de mise en forme Balises de liens Balises de liste Balises d’image Balises de tableau Balises de formulaire Balises de cadre 1 Balises de structure • Un document XHTML dispose de 3 composants principaux - la déclaration XHTML - l’en-tête - le corps 2 • La balise <html> - Tout le contenu d’un document XHTML est contenu entre <html> et </html> Balises de structure Déclaration XHTML • Attributs - xmlns : décrit l’espace de nommage du document 3 • La balise <head> - contient des infos qui ne sont pas affichés • ‣ Titre du document, métadonnées, ...etc ‣ balises <base />, <meta />, <title>, <link />, <script> et <style> Balises de structure En-tête Attributs - profile : utilisation avancée des métadonnées 4 • La balise <base /> - Déclare une référence globale pour les attributs href et target, utilisée pour le calcul de l’URL • Exemple Balises de structure En-tête - <base href=“http://tetras.u-strasbg.fr/”> • Attributs - href : Serveur et path de base des URL - target : Frame de destination des URL 5 • La balise <meta /> - Définit les métadonnées du document ‣ Balises de structure En-tête mots clés, date d’expiration, auteur, logiciel utilisé, etc... • Exemple - <meta name=“author” content=“Arnaud FREY”> - <meta name=“keywords” content=“accueil, bienvenue”> - <meta http-equiv=“refresh” content=“5” URL=“http://www.monserveur.com”> 6 • La balise <title> - Donne un titre au document - Ne s’affichera pas dans la page Balises de structure En-tête • Exemple - <title>Cours XHTML</title> • Astuce - Pas plus de 40 caractère pour que les navigateurs puissent afficher le titre en entier 7 • La balise <body> - Comprend les éléments du corps du document (tout ce qui va “se voir” dans le navigateur) Balises de structure Le corps • Exemple - <body>... contenu du document ...</body> • Attributs - aucun 8 Exercice • Ecrivez le squelette d’une page avec les caractéristiques suivantes - encodage : utf-8 - titre de la page : première page XHTML - auteur : vous même - mots clés : xhtml, test 9 Balises de présentation • XHTML permet d’influer sur l’affichage en variant la mise en valeur à 2 niveaux - Mise en forme du paragraphe (une partie logique du document) - Mise en forme du texte (un ou plusieurs caractères) 10 • Les balises <h1>, <h2>, ..., <h6> - Etablissent la hiérarchie des titres du document où h1 est le titre le plus extérieur (grand titre), h6 le plus imbriqué • Exemple - Balises de présentation Les blocs <h1>Table des matières</h1> <h2>Chapitre 1 - Introduction</h2> • Attributs - aucun 11 • La balise <br /> - Insère une rupture de ligne (retour chariot) • La balise <hr /> Balises de présentation Les blocs - Place une ligne horizontale dans la page • Exemple - <hr /><br /><hr /> 12 • La balise <p> - Indique un paragraphe - Cette balise (comme les titres) induit un espacement verticale après le paragraphe Balises de présentation Les blocs • Exemple - <p>Ceci est un premier paragraphe</p> <p>Ici, c’est un nouveau paragraphe</p> • Attributs - aucun 13 • La balise <pre> - Indique un bloc de texte à traiter comme ayant été préalablement mis en forme. - Ici les espaces, les tabulations et les retours chariots sont pris en compte. Balises de présentation Les blocs • Exemple - <pre> Référence Article Prix P34-1453 Polo 29,90 C48-3245 Chemise 53,50 </pre> 14 • Les balises <div> et <span> - Des balises génériques définissant un bloc Balises de présentation Les blocs - Utilisées en général pour appliquer un style • Attributs - aucun 15 • La balise <blockquote> - Contient une citation qui est mise en retrait par rapport au reste du texte Balises de présentation Les blocs • Exemple - <blockquote>Etre ou ne pas être, tel est la question</blockquote> de <cite>William Shakespeare</cite> 16 • La balise <b> - Sert à mettre du texte en gras • Exemple Balises de présentation Le texte - <b>Nom :</b> FREY • Attributs - Aucun 17 • La balise <big> - Sert à augmenter la taille courante du texte - A l’inverse, la balise <small> sert à diminuer la taille courante du texte Balises de présentation Le texte • Exemple - <big>O</big>ption web statique - <big>R</big>R<small>R</small> 18 • La balise <i> - Met le texte en italique Balises de présentation Le texte • Exemple - du texte en <i>italique</i>! 19 • Les balises <sub> et <sup> - mettent le texte en indice (sub) et en exposant (sup) Balises de présentation Le texte • Exemple - x<sub>n</sub> + x<sup>n+1</sup> 20 • Différentes balises servent à mettre en valeur le sens du texte <abbr> précise que le texte est écrit sous forme abrégée (ex : Dr) <acronym > <address> <cite> <code> <del> <dfn> <em> <ins> <kbd> <q> <samp> <strong> <var> contient le texte d’un acronyme (ex : IUT) contient une adresse postale ou électronique contient le nom de la source d’une citation (ex : bible) contient des éléments de code affichés en police à espacement fixe contient le texte qui a été supprimé d’un document indique la définition d’un terme contient du texte à mettre en valeur (en général italique) contient le texte qui a été inséré dans un document contient le texte correspondant à une saisie clavier (ex : enter) contient une citation à afficher dans le texte contient le texte représentant la sortie littérale d’un programme contient du texte à mettre en valeur (en général gras) contient une variable dans un programme Balises de présentation Le texte 21 Exercice <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Exercice XHTML</title> </head> <body> <h1>Jules Ducommun</h1> <hr> <h2>Mes coordonnées</h2> <hr> <p>Jules Ducommun<br /> <!-- Ancienne adresse 14 rue du tilleul<br /> --> 12 avenue Mandès France<br /> 67300 Schiltigheim</p> <h2>Mon curriculum vitae</h2> <hr> <h2>Mes hobbies</h2> • Voici un exemple de code XHTML Quel sera le résultat final du navigateur? <p>Je fais du roller,<br /> de la natation<br /> et j’aime lire.<br /> </p> </body> </html> 22 Exercice • Ecrivez le code de la page suivante : 23
