Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau

Dimension: px

Commencer à balayer dès la page:

Download "Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau"

Jean-Baptiste Clermont
il y a 7 ans
Total affichages :

1 Les balises XHTML Balises de structure Balises de liens Balises de liste Balises d image Balises de tableau Balises de cadre Balises de mise en forme Balises de formulaire 1

2 Balises de structure Un document XHTML dispose de 3 composants principaux - la déclaration XHTML - l en-tête - le corps 2

3 Déclaration XHTML La balise <html> - Tout le contenu d un document XHTML est contenu entre <html> et </html> Balises de structure Attributs - xmlns : décrit l espace de nommage du document 3

4 La balise <head> En-tête - contient des infos qui ne sont pas affichés Balises de structure Titre du document, métadonnées,...etc balises <base />, <meta />, <title>, <link />, <script> et <style> Attributs - profile : utilisation avancée des métadonnées 4

5 La balise <base /> En-tête - Déclare une référence globale pour les attributs href et target, utilisée pour le calcul de l URL Balises de structure - <base href= > Attributs - href : Serveur et path de base des URL - target : Frame de destination des URL 5

6 La balise <meta /> En-tête - Définit les métadonnées du document Balises de structure mots clés, date d expiration, auteur, logiciel utilisé, etc... - <meta name= author content= Arnaud FREY > - <meta name= keywords content= accueil, bienvenue > - <meta http-equiv= refresh content= 5 URL= > 6

7 La balise <title> En-tête - Donne un titre au document - Ne s affichera pas dans la page Balises de structure - <title>cours XHTML</title> Astuce - Pas plus de 40 caractère pour que les navigateurs puissent afficher le titre en entier 7

8 La balise <body> Le corps - Comprend les éléments du corps du document (tout ce qui va se voir dans le navigateur) Balises de structure - <body>... contenu du document...</body> Attributs - aucun 8

9 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

10 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

11 Les blocs 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é Balises de présentation - <h1>table des matières</h1> <h2>chapitre 1 - Introduction</h2> Attributs - aucun 11

12 La balise <br /> Les blocs - Insère une rupture de ligne (retour chariot) La balise <hr /> Balises de présentation - Place une ligne horizontale dans la page - <hr /><br /><hr /> 12

13 La balise <p> Les blocs - Indique un paragraphe - Cette balise (comme les titres) induit un espacement verticale après le paragraphe Balises de présentation - <p>ceci est un premier paragraphe</p> <p>ici, c est un nouveau paragraphe</p> Attributs - aucun 13

14 La balise <pre> Les blocs - 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 - <pre> Référence Article Prix P Polo 29,90 C Chemise 53,50 </pre> 14

15 Les blocs Les balises <div> et <span> - Des balises génériques définissant un bloc Balises de présentation - Utilisées en général pour appliquer un style Attributs - aucun 15

16 Les blocs La balise <blockquote> - Contient une citation qui est mise en retrait par rapport au reste du texte Balises de présentation - <blockquote>etre ou ne pas être, tel est la question</blockquote> de <cite>william Shakespeare</cite> 16

17 La balise <b> Le texte - Sert à mettre du texte en gras Balises de présentation - <b>nom :</b> FREY Attributs - Aucun 17

18 La balise <big> Le texte - Sert à augmenter la taille courante du texte - A l inverse, la balise <small> sert à diminuer la taille courante du texte Balises de présentation - <big>o</big>ption web statique - <big>r</big>r<small>r</small> 18

19 La balise <i> Le texte - Met le texte en italique Balises de présentation - du texte en <i>italique</i>! 19

20 Le texte Les balises <sub> et <sup> - mettent le texte en indice (sub) et en exposant (sup) Balises de présentation - x<sub>n</sub> + x<sup>n+1</sup> 20

21 Le texte Différentes balises servent à mettre en valeur le sens du texte <abbr> <acronym <address> > <cite> <code> <del> <dfn> <em> <ins> <kbd> <q> <samp> <strong> <var> précise que le texte est écrit sous forme abrégée (ex : Dr) 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 21

22 Exercice <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" <head> <title>exercice XHTML</title> </head> <body> <h1>jules Ducommun</h1> <hr> <h2>mes coordonnées</h2> <hr> <p>jules Ducommun<br />  12 avenue Mandès France<br /> 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

23 Exercice Ecrivez le code de la page suivante : 23

Documents pareils

HTML. Notions générales

HTML. Notions générales 1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS