docCours de XHTML
download 
Plainte Transcription
Cours de XHTML
Cours de XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec des balises. Une page XHTML est donc un simple fichier texte contenant des balises permettant de mettre en forme la page (les titres, les paragraphes, les images, les liens…) et peut donc très facilement être conçue grâce à un simple éditeur de texte. Les outils pour préparer et tester notre travail Nous avons besoin seulement d’un éditeur de texte pour écrire notre code XHTML. Nous pourrions très bien prendre le bloc note de Windows, mais pour nous faciliter le travail, nous allons télécharger un éditeur un peu plus évolué à l’adresse : http://www.elie-vignal.fr/cours/pspad.exe Et d’un navigateur internet pour tester notre page style Internet Explorer ou Mozilla Firefox ou Chrome ou encore Safari ou … Créez un dossier « Cours XHTML » dans votre dossier personnel. Fonctionnement des balises Structure des balises Les balises délimitent une fraction du document XHTML (paragraphe, titre...). Elles peuvent être imbriquées entre elles et se présentent comme ci-dessous : <balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise> On peut remarquer qu'une balise peut contenir trois types d'informations : Un nom de balise. Une liste d'attributs. Une chaîne de caractères. Les balises sont toujours écrites en minuscule et fonctionnent généralement par paire: une balise ouvrante <balise>, une balise fermante </balise> délimitant ensembles le contenu. Néanmoins quelques balises ne fonctionnent pas par paire. Les balises d'images et de saut de ligne par exemple auront la syntaxe suivante : <balise /> Règles d’imbrication Dans l'exemple, ci-dessous, la balise 1 est parente de la balise 2. <balise1> <balise2> (...) </balise2> (...) </balise1> Lorsque plusieurs balises sont imbriquées, une règle simple s'applique : une balise ouverte à l'intérieur d'une autre doit obligatoirement être refermée avant la fermeture de sa balise mère. Les balises ne peuvent donc pas être imbriquées comme ceci : <balise1> <balise2> </balise2> </balise1> XHTML - Définition de Type de Document La première balise de votre document doit être la balise de DTD. Elle sert à indiquer à quelles règles d'écriture obéit le code d'une page XHTML. Il n’est pas nécessaire de retenir les différents DTD. Servezvous seulement du premier. Ci-dessous les différentes DTD existant actuellement pour le XHTML: XHTML1.0 strict (Actuellement, je recommande de prendre celui-ci) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML1.0 transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML1.0 frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Xhtml 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> XHTML - Structure générale Structure Après la DTD, il suffit d'ouvrir la balise <html> qui englobera l’ensemble des autres balises de votre page. Cette balise contient deux paires de balises: Les balises <head> et </head> délimitant l’entête du document. Les balises <body> et </body> délimitant le corps du document. L'entête L'entête contient toutes les données relatives au document (le titre du document et sa description par exemple). Le titre Le plus important dans l'en-tête est le titre de la page, il se définit avec les balises <title>. <title>Titre de votre page</title> Les balises <meta> Les balises <meta> sont facultatives, mais importantes pour le navigateur, et pour les moteurs de recherche. Encodage de la page <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Description de la page <meta name="Description" content="Description de votre page" /> Langue de la page <meta name="Language" content="fr" /> Le corps Le corps de votre page (entre les balises <body> et </body>), est la partie visible du document XHTML, il peut être constitué d’un grand nombre de types de balises différents (titres, paragraphes, liens,...). Exemple Exemple d'une page XHTML très basique: <!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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Titre de la page</title> <meta name="Language" content="fr" /> <meta name="Description" content="Description de votre page" /> </head> <body> Corps de la page </body> </html> Exercice : Ouvrez l’éditeur de texte PSPAD. Ecrivez une page XHTML nommée « ma-page-web.htm » ayant pour titre « Ma première page web », pour description « C’est la première page que j’écris en XHTML ». Le corps de votre page contiendra : - un titre («Le XHTML ») et une description (Expliquez ce que le XHTML), - un sous titre (« La balise HEAD ») et une description (Expliquez à quoi sert la balise HEAD), - un sous sous titre (« La Balise TITLE ») et une description (Expliquez à quoi sert la balise TITLE), - un deuxième sous titre (« La balise BODY ») et une description (Expliquez à quoi sert la balise BODY), Pensez a sauver votre page. Ouvrez le dossier contenant votre page web, double-cliquez sur votre page pour l’ouvrir dans le navigateur. Dans le navigateur, vous devriez voir : Le XHTML C’est ………………………………. La balise HEAD C’est ……………………………… La balise TITLE C’est …………………………….. La balise BODY C’est ……………………………. Revenez à l’éditeur de texte PSPAD sans refermer votre navigateur. XHTML - Mise en forme de texte Titres Le langage XHTML définit 6 niveaux de titres, les balises <h1>, <h2>, <h3>, ..., <h6> (<h1> et <h6> représentent respectivement la plus et la moins importante). Elles permettent de définir une structuration hiérarchique des paragraphes d'une page. <h1>Titre</h1> Exercice : Dans votre page web, encadrez votre titre avec la balise <h1>, vos sous titres avec la balise <h2> et vos sous sous titres avec la balise <h3>. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites « Rafraichir la page » pour constater les changements. Paragraphes Les paragraphes sont délimités par les balises <p> et </p>. Ils ne doivent être employés que lorsque leur contenu ne peut être présenté d'aucune autre manière (liste, tableau,...). <p>Votre paragraphe</p> Exercice : Dans votre page web, encadrez vos descriptions avec la balise <p> pour indiquer que ce sont des paragraphes. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites « Rafraichir la page » pour constater les changements. Retour à la ligne Les retours à la ligne sont définis à l'intérieur d'un paragraphe par la balise unique <br/>. <br/> Ligne horizontale Des lignes horizontales peuvent être ajoutées aux paragraphes, elles sont définies par la balise unique <hr/>. <hr/> Exercice : Dans votre page web, ajoutez à la fin de votre page un saut de ligne, puis une ligne horizontale. Rendez-vous sur votre navigateur et faites « Rafraichir la page » pour constater les changements. XHTML - Les balises de styles Texte en gras Les textes en gras peuvent être définis par les balises <b>. <b>Texte en gras</b> Texte en italique Les textes en italique peuvent être définis par les balises <i>. <i>Texte en italique<i/> Texte souligné Les textes soulignés peuvent être définis par les balises <u>. <u>Texte souligné<u/> Texte barré Les textes barrés peuvent être définis par les balises <s>. <s>Texte barré<s/> Texte en indice Les textes en indice peuvent être définis par les balises <sub>. <sub>Texte en indice<sub/> Texte en exposant Les textes en indice peuvent être définis par les balises <sup>. <sup>Texte en exposant<sup/> Exercice : Dans votre page web, mettez un peu de style dans vos descriptions. Enregistrer à nouveau votre page, rendez-vous sur votre navigateur et faites « Rafraichir la page » pour constater les changements. XHTML - Les liens Structure Les liens hypertextes sont définis par les balises <a> associées à l'attribut href qui spécifie la source du document cible. <a href="http://www.votre-site.fr/index.html">votre texte</a> Liens spéciaux Lien vers adresse de messagerie électronique <a href="mailto:[email protected]">votre texte</a> Lien externe vers un serveur FTP <a href="ftp://ftp.site.com">votre texte</a> Exercice : A la fin de votre page web, ajouter un lien vers le site de laclasse.com et ajoutez un lien « Me contacter » pour vous écrire. Constatez les changements. XHTML - Les images Les images sont définies par la balise <img> associée à l'attribut src qui spécifie la source de l’image et à l’attribut alt qui spécifie un texte alternatif au cas où l'image ne s'afficherait pas. <img src="dossier/image.png" alt=" texte alternatif "/> Exercice : Cherchez une image sur Google. Enregistrez cette image dans votre dossier. Insérez-là dans votre page web. XHTML - Les tableaux Il est souvent utile de présenter des informations en ligne et en colonne, les tableaux sont la pour ça. Les tableaux sont définis par les balises suivantes: Le tableau est encadré par les balises <table> Le titre du tableau est encadré par les balises <caption> Les lignes sont encadrées par les balises <tr> Les cellules d'en-tête sont encadrées par les balises <th> Les cellules de valeur sont encadrées par les balises <td> <table> <caption>Titre du tableau </caption> <tr> <th> Titre 1 </th> <th> Titre 2 </th> <th> Titre 3 </th> <th> Titre 4 </th> </tr> <tr> <td> Valeur 1 </td> <td> Valeur 2 </td> <td> Valeur 3 </td> <td> Valeur 4 </td> </tr> </table> Exercice : Représentez le tableau correspondant au calendrier du mois de décembre 2009. Votre tableau aura donc 6 lignes et 7 colonnes et pour titre « Décembre 2009 ». XHTML - Les listes Listes de définitions Les listes de définitions sont définies par les balises suivantes: La liste est encadrée par les balises <dl> Les termes sont encadrés par les balises <dt> Les définitions sont encadrées par les balises <dd> <dl> <dt>Premier terme</dt> <dd>Première définition</dd> <dt>Deuxième terme</dt> <dd>Deuxième définition</dd> </dl> Exercice : Dans votre page web, faites une liste des balises déjà vu avec leur définition. Listes numérotées Les listes numérotées sont définies par les balises suivantes: La liste est encadrée par les balises <ol> Les termes de la liste sont encadrés par les balises <li> <ol> <li>Premier terme</li> <li>Deuxième terme</li> </ol> Exercice : Dans votre page web, faites une liste numérotée des matières que vous aimez. Classez les par préférence de la plus appréciée à la moins appréciée. Listes à puces Les listes à puces sont définies par les balises suivantes: La liste est encadrée par les balises <ul> Les termes de la liste sont encadrés par les balises <li> <ul> <li>Premier terme</li> <li>Deuxième terme</li> </ul> Exercice : Dans votre page web, ajoutez une liste à puces de vos professeurs. XHTML - Sigles et acronymes Sigles Les sigles peuvent être définis par les balises <abbr>. <abbr>Sigle</abbr> Exercice : Dans votre page web, donnez 5 abréviations comme SNCF … XHTML - Les caractères spéciaux Voici une petite liste des caractères spéciaux les plus courants en xhtml. Caractères Codes HTML Caractères Codes HTML " " © © & & ¶ ¶ ‹ < ¼ ¼ › > ½ ½ espace ¾ ¾ € € ÷ ÷ ® ® ± ± Exercice : A la fin de votre page web, ajoutez votre copyright du style « Ma page web 2009 © votre nom »
