La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Cours XHTML/CSS » La sémantique du XHTML

Atelier Webmaster



< Cours précédent - Sommaire du cours - Cours suivant >

Cours XHTML/CSS : La sémantique du XHTML

Dans le Petit Larousse Illustré on peut lire à sémantique : Sémantique : n.f. (du grec semantikos qui signifie) Relatif au sens, à la signification des unités linguistiques. Et, aussi incroyable que cela puisse paraître nous allons parler de sémantique dans ce cours bn_tongue

En effet, vous allez vous rendre compte très vite, que pour des contextes différents, on pourrait se servir de la même balise. Dis autrement pour un même contexte on pourrait se servir de différentes balises bn_big_smile
Prenons un exemple. Si je veux mettre un titre au bloc menu de mon site je pourrai utiliser la balise que l'on a vu au chapitre 2 : <p></p> puisque mon titre est du texte. Mais nous pourrions aussi utiliser la balise <h1> </h1> ou encore la balise <div></div>.
Nous verrons la signification de ces deux balises plus loin.

Le rendu visuel sera similaire (ou presque... La balise <h1></h1> par exemple utilise une taille de police plus grande et une graisse plus épaisse.) de toute façon nous verrons plus loin que, grâce au CSS, nous pourrons le rendre identique.
Alors, me direz-vous : comment choisir entre les différentes balises possibles ? Et, pourquoi utiliser l'une plutôt qu'une autre ?

Il faut savoir que chaque balise a un sens. Une sémantique. Ainsi la balise <p></p> est utilisé pour des paragraphes de textes. La balise <h1></h1> signifie que ce qu'elle entoure est un titre. La balise <div></div> est une balise dites générique (il n'en existe que 2 de cette sorte) puisqu'elle n'a aucun sens sémantique, on l'utilisera donc pour tout ce qui ne doit pas avoir de sens particulier.
Dans toute la suite du chapitre, nous allons étudier la plupart des balises pour comprendre leur sens et leur utilisation. (vous saurez donc faire pas mal de choses en XHTML tout bientôt mini_bn) Mais avant cela, j'insiste : il est très important de respecter la sémantique de chaque balise, de plus c'est à votre bénéfice !
  • En premier lieu, cela permet à vos pages Web d'être plus accessible pour vos visiteurs. Les personnes mal-voyantes ou qui ont des problèmes pour naviguer sur le Web par exemple, peuvent se raccrocher à la sémantique des balises pour comprendre le sens d'un site Web  ou pour naviguer sur ce même site. Ceci notamment grâce à l'utilisation de petits logiciels  qui interprètent pour eux le sens des balises. Quelques exemples : navigation facile à travers les titres, ou intonations de voix différentes selon la balise avec un lecteur de page Web comme Jaws pour les mal-voyants.
  • En deuxième lieu, cela permet à vos pages Web d'être plus accessible  pour les moteurs de recherche. Ils pourront plus facilement accéder à votre site et communiquer des informations plus pertinentes à leurs utilisateurs ! (et vous serez donc mieux positionné dans leurs résultats)
  • Enfin, c'est aussi bien plus lisible et compréhensible pour vous. (ainsi que pour les codeurs qui seraient susceptible de travailler avec vous.)


Cela vous semble peut-être très théorique ce que je vous raconte, mais c'est tout du moins important, car on se laisse vite entrainer à utiliser  une mauvaise balise au mauvaise endroit ! C'est, en général en acquérant de l'expérience que l'on se rend compte de la nécessité et du bien fondé de la sémantique... Donc pour éviter d'avoir à recoder votre site proprement, pensez-y tout de suite bn_wink

Type block - type inline ?


Vous souvenez vous quand nous avons rapidement parlé des balises de type inline et celle de type block, dans le chapitre 2 ? Hé bien nous allons maintenant comprendre exactement ce qu'elles veulent dire.
Fiche d'identité d'une balise de type block
  • Une balise de type block (que l'on traduirait, tout simplement, par "bloc" en Français) est suivie et précédée par un retour à la ligne. Concrètement, cela veut dire que si vous mettez 2 balises de types block à la suite, elles se retrouveront l'une en dessous de l'autre à l'affichage. (c'est le meilleur moyen pour reconnaitre ce type de balise quand on a un doute bn_wink)
  • Une balise de type block peut contenir des balises inline et/ou des balises block.
    Soit l'exemple suivant :
    Code :
    <div>
    Cette balise est de <strong>type block</strong> et je peux mettre des <em>balises inline</em> aussi dedans !
    <p>J'y rajoute même une balise de <strong>type block</strong>.</p>
    </div>


Fiche d'identité d'une balise de type inline
  • Une balise de type inline (que l'on traduirait par "en ligne" en Français) n'est ni suivie ou précédée d'un retour à la ligne. C'est-à-dire qu'on peut mettre plusieurs balise inline à la suite, et elles resteront... sur la même ligne. bn_accord (d'où le "en ligne" bn_heureux)
  • Une balise de type inline peut contenir d'autres balises de type inline. Mais en aucun cas des balises de type block ! C'est une erreur courante auquel il faut faire attention. (pour faire une comparaison, c'est comme vouloir ranger une armoire dans une valise. C'est... pas très très malin bn_tongue)


Voilà, c'est tout ! Ce n'est pas bien compliqué... Si vous gardez tout cela en tête, vous aurez des pages bien structurées, et c'est là tout le secret !

Il est à noter qu'il existe plus que 2 types de balises. (notamment des balises pour faire des tableaux ou des listes) Mais les  2 types les plus important sont inline et block, on s'en servira tout le temps, même quand on n'utilisera pas des balises de ce type là mini_bn Bref, sachez qu'il existe plus que 2 types, mais oubliez-le bn_heureux


Nous allons maintenant étudier la sémantique et le fonctionnement de nombreuses balises (nous verrons la plupart dans ce chapitre et nous croiserons les autres dans la suite du cours) soyez donc attentif, car vous savez désormais que c'est important mini_bn

Sémantique des balises inline


Emphase

L'emphase permet de mettre en évidence du texte, le texte mit entre une balise d'emphase est donc important. Il existe 2 balises d'emphases :
  • <strong></strong> ("strong" veut dire "fort" en Anglais) Emphase forte. Applique de la graisse au texte (c'est à dire que cette balise met le texte en gras) sur la plupart des navigateurs.
  • <em></em> ("em" est l'abréviation "d'emphase" en Anglais) Emphase un peu moins forte que <strong></strong>, mais similaire. Met le texte en italique sur la plupart des navigateurs.

J'ai bien dit sur la plupart des navigateurs ! Le rendu permet de mettre en évidence le texte pour traduire le sens de la balise. Mais vous pourrez modifier vous-même le rendu grâce au CSS plus tard. C'est donc le sens qui prime ici.

Ces balises ne possèdent pas d'attributs particuliers.

Liens hypertextes

Les liens hypertextes permettent de naviguer sur le site Internet. Voici un exemple :
Code :
Je vous invite à visiter le <a href="http://la-bnbox.fr/forum.html" title="Bar à Nougat : forum de la Bnbox !">Bar à Nougat</a>.



Je ne l'ai pas remis ici, parce qu'à la longue cela prendrai trop de place, mais il faudrait, bien entendu, mettre :
Code :
<!DOCTYPE html PUBLIC "-//W3 //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>
       <title>Titre de la page</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
         <p>

Avant le lien et :
Code :

         </p>
   </body>
</html>

après mini_bn


C'est donc une balise double s'ouvrant avec <a> et se fermant avec </a>. Elle comporte 2 attributs essentiels :
  • href=" " Il faut y indiquer l'url qui sera affiché lorsqu'on cliquera sur le lien. C'est à dire le chemin jusqu'à cette page.
  • title=" " C'est le titre du lien. Il apparait quand on laisse sa souris plus d'1s sur le lien. Il permet d'expliciter un peu plus ce qui se passe quand on clique.
    Il est important de préciser à nouveau dans le titre le descriptif du lien (ici "Bar à Nougat"). En effet, les personnes ayant des difficultés pour naviguer sur le net, n'utilisent que les titres des liens pour naviguer et n'en voit donc plus le descriptif. C'est un détails à ne pas négliger.



Nous allons maintenant étudier plus en détails ce que l'on met entre les apostrophes de l'attribut href. C'est ce qu'on appelle l'url, le chemin pour aller jusqu'à la page voulue. Soyez particulièrement attentif car on s'en servira très souvent et pas seulement pour les liens hypertextes.

Imaginons un arbre. Un arbre est composé d'un tronc qui se ramifie en branches, qui se ramifient elles-même en branches ou en feuilles.
Supposons que les feuilles soient nos pages Web et que les branches soient les dossiers dans lesquelles elles se trouvent.
Voici un petit dessin que je vais utiliser pour expliquer mon propos :
document/atelier/160_arbre.png

Oui, je sais, ce n'est pas magnifique, mais bon... ça fera l'affaire mini_bn
  • Dans un même dossier
    Si 2 pages se trouvent dans un même dossier, alors il suffit simplement d'indiquer le nom et l'extension de la page où l'on veut aller.
    Donc si on se trouve sur la feuille n°2 et que l'on veut aller sur la feuille n°3 (qui se trouve sur la même branche) on fait le lien suivant :
    Code :
    <a href="3.feuille" title="Feuille n°3">Feuille n°3</a>
    <!-- J'ai décidé que ma feuille avait pour extension .feuille -->
  • Dans un dossier supérieur
    Si la page sur laquelle on veut aller se trouve dans un dossier contenu dans le dossier où se trouve notre page actuelle, on indique dans href le nom du dossier, un slash (/) puis le nom et l'extension de la page où l'on veut aller.
    Par exemple si on se trouve sur la feuille n°2 et que l'on veut aller sur la feuille n°4 (située sur la branche B_2 qui est une ramification de la branche B) alors on fait le lien suivant :
    Code :
    <a href="B_1/4.feuille" title="Feuille n°4">Feuille n°4</a>
  • Dans un dossier inférieur
    Cette fois-ci, passons tout de suite à l'exemple. Si on se trouve sur la feuille n°2 de la branche B et que l'on veut aller sur la feuille n°5 de la branche C (dossier inférieur) on fait alors le lien suivant :
    Code :
    <a href="../C/5.feuille" title="Feuille n°5">Feuille n°5</a>

    Donc à chaque fois que l'on veut "revenir en arrière" d'un dossier, on  met ../
    Si on s'était trouvé sur la feuille n°4 de la branche B_2 on aurait donc mis :
    Code :
    <a href="../../C/5.feuille" title="Feuille n°5">Feuille n°5</a>


    Vous avez compris ? Alors maintenant, ça va être à vous de travailler, héhé bn_siffle On va faire un grand mix : vous êtes sur la feuille n°4 et vous désirez aller sur la feuille n°6. Quel lien hypertexte écrivez-vous ?
    Allez, au boulot !

    Vous avez finit ? Place à la correction :
    Code :
    <a href="../../C/C_1/6.feuille" title="Feuille n°6">Feuille n°6</a>

Les liens précédents sont ce que l'on appelle des chemins relatifs. Car on définie la page d'arrivée par rapport à la page de départ. C'est relatif quoi bn_wink

  • Chemin absolu
    Et si la feuille d'arrivée se trouve sur un autre arbre ? C'est-à-dire si la page pointée se trouve sur un autre site Web. Il faut alors utiliser ce que l'on appelle un chemin absolu. Il faut indiquer l'adresse complète du site sur laquelle se trouve la page, par exemple :
    Code :
    Une collection de pièces : <a href="http://1000et1piece.free.fr" title="Mille et Une pièces : Collection de pièces">Mille et Une pièces</a>
    N'oubliez pas le <a href="http://1000et1piece.free.fr/livreor.php" title="Mille et Une pièces : Livre d'or">livre d'or</a>.



On peut se situer sur n'importe quelle page, ce lien hypertexte fonctionnera toujours, d'où le nom de chemin absolu.
On peut toujours utiliser un chemin absolu, mais quand on peut utiliser un chemin relatif, c'est préférable. (surtout sur son propre site, car ainsi on peut changer l'adresse de son site Web sans avoir à modifier toutes ses pages mini_bn)
  • Ancre
    Mais on peut aussi naviguer grâce aux liens hypertextes sur une page seulement. On peut par exemple faire un lien qui envoie vers le milieu de la page. Pour cela, il faut placer dans n'importe quelle balise de la page ce que l'on appelle une ancre. Ceci grâce à l'attribut id=\" \". L'id ne doit juste pas commencer par un chiffre.
    Code :
    <div id="ancre">Heureux l'homme qui ne marche pas selon le conseil des méchants, qui ne s'arrête pas sur la voie des pécheurs, et qui ne s'assied pas en compagnie des moqueurs, mais qui trouve son plaisir dans la loi de l'Éternel, et qui la médite jour et nuit !</div>

    Pour pointer un lien hypertexte il suffit d'utiliser le symbole dièse (#) suivi du nom de l'ancre.
    Code :
    <a href="#ancre" title="Aller au début du texte">Texte Bible Ipsum.</a>

    Attention, un id est unique ! Deux attributs id ne peuvent pas avoir une même valeur sur une même page.

    Voici un exemple pour mieux comprendre :
    Code :

    <p id="haut_de_page">
    - <a href="#paragraphe1">Paragraphe 1</a>
    - <a href="#paragraphe2">Paragraphe 2</a>
    - <a href="#paragraphe3">Paragraphe 3</a>
    - <a href="#paragraphe4">Paragraphe 4</a>
    - <a href="#paragraphe5">Paragraphe 5</a>
    </p>

    <p id="paragraphe1">Heureux l'homme qui ne marche pas selon le conseil des méchants, qui ne s'arrête pas sur la voie des pécheurs, et qui ne s'assied pas en compagnie des moqueurs, mais qui trouve son plaisir dans la loi de l'Éternel, et qui la médite jour et nuit ! Il est comme un arbre planté près d'un courant d'eau, qui donne son fruit en sa saison, et dont le feuillage ne se flétrit point : tout ce qu'il fait lui réussit. Il n'en est pas ainsi des méchants : ils sont comme la paille que le vent dissipe. C'est pourquoi les méchants ne résistent pas au jour du jugement, ni les pécheurs dans l'assemblée des justes ; car l'Éternel connaît la voie des justes, et la voie des pécheurs mène à la ruine.
    <a href="#haut_de_page">Retour en haut</a></p>

    <p id="paragraphe2">Pourquoi ce tumulte parmi les nations, ces vaines pensées parmi les peuples ? Pourquoi les rois de la terre se soulèvent-ils Et les princes se liguent-ils avec eux Contre l'Éternel et contre son oint ? Brisons leurs liens, délivrons-nous de leurs chaînes ! Celui qui siège dans les cieux rit, le Seigneur se moque d'eux. Puis il leur parle dans sa colère, il les épouvante dans sa fureur : c'est moi qui ai oint mon roi Sur Sion, ma montagne sainte ! Je publierai le décret ; l'Éternel m'a dit : tu es mon fils ! Je t'ai engendré aujourd'hui. Demande-moi et je te donnerai les nations pour héritage, les extrémités de la terre pour possession ; tu les briseras avec une verge de fer, tu les briseras comme le vase d'un potier. Et maintenant, rois, conduisez-vous avec sagesse ! Juges de la terre, recevez instruction ! Servez l'Éternel avec crainte, et réjouissez-vous avec tremblement. Baisez le fils, de peur qu'il ne s'irrite, et que vous ne périssiez dans votre voie, car sa colère est prompte à s'enflammer. Heureux tous ceux qui se confient en lui !
    <a href="#haut_de_page">Retour en haut</a></p>

    <p id="paragraphe3">O Éternel, que mes ennemis sont nombreux ! Quelle multitude se lève contre moi ! Combien qui disent à mon sujet : plus de salut pour lui auprès de Dieu ! Mais toi, ô Éternel ! tu es mon bouclier, tu es ma gloire, et tu relèves ma tête. De ma voix je crie à l'Éternel, et il me répond de sa montagne sainte. Je me couche, et je m'endors ; je me réveille, car l'Éternel est mon soutien. Je ne crains pas les myriades de peuples Qui m'assiègent de toutes parts. Lève-toi, Éternel ! sauve-moi, mon Dieu ! Car tu frappes à la joue tous mes ennemis, tu brises les dents des méchants. Le salut est auprès de l'Éternel : que ta bénédiction soit sur ton peuple !
    <a href="#haut_de_page">Retour en haut</a></p>

    <p id="paragraphe4">Quand je crie, réponds-moi, dieu de ma justice ! Quand je suis dans la détresse, sauve-moi ! Aie pitié de moi, écoute ma prière ! Fils des hommes, jusques à quand ma gloire sera-t-elle outragée ? Jusques à quand aimerez-vous la vanité, chercherez-vous le mensonge ? Sachez que l'Éternel s'est choisi un homme pieux ; l'Éternel entend, quand je crie à lui. Tremblez, et ne péchez point ; parlez en vos coeurs sur votre couche, puis taisez-vous. Offrez des sacrifices de justice, et confiez-vous à l'Éternel. Plusieurs disent : qui nous fera voir le bonheur ? Fais lever sur nous la lumière de ta face, ô Éternel ! Tu mets dans mon coeur plus de joie qu'ils n'en ont Quand abondent leur froment et leur moût. Je me couche et je m'endors en paix, car toi seul, ô Éternel ! tu me donnes la sécurité dans ma demeure.
    <a href="#haut_de_page">Retour en haut</a></p>

    <p id="paragraphe5">Prête l'oreille à mes paroles, ô Éternel ! Écoute mes gémissements ! Sois attentif à mes cris, mon roi et mon Dieu ! C'est à toi que j'adresse ma prière. Éternel ! le matin tu entends ma voix ; le matin je me tourne vers toi, et je regarde. Car tu n'es point un Dieu qui prenne plaisir au mal ; le méchant n'a pas sa demeure auprès de toi. Les insensés ne subsistent pas devant tes yeux ; tu hais tous ceux qui commettent l'iniquité. Tu fais périr les menteurs ; l'Éternel abhorre les hommes de sang et de fraude. Mais moi, par ta grande miséricorde, je vais à ta maison, je me prosterne dans ton saint temple avec crainte. Éternel ! conduis-moi dans ta justice, à cause de mes ennemis, aplanis ta voie sous mes pas. Car il n'y a point de sincérité dans leur bouche ; leur coeur est rempli de malice, leur gosier est un sépulcre ouvert, et ils ont sur la langue des paroles flatteuses. Frappe-les comme des coupables, ô Dieu ! Que leurs desseins amènent leur chute ! Précipite-les au milieu de leurs péchés sans nombre ! Car ils se révoltent contre toi. Alors tous ceux qui se confient en toi se réjouiront, ils auront de l'allégresse à toujours, et tu les protégeras ; tu seras un sujet de joie Pour ceux qui aiment ton nom. Car tu bénis le juste, ô Éternel ! Tu l'entoures de ta grâce comme d'un bouclier.
    <a href="#haut_de_page">Retour en haut</a></p>



    Dans mon exemple j'ai même rajouté un lien permettant de retourner en haut de la page (donc au menu) à chaque fin de paragraphe. C'est très utile pour les personnes ayant des difficultés à naviguer sur le net, n'hésitez donc pas à employer de tels liens.
    Vous pouvez bien sûr utiliser une ancre dans le cadre d'un chemin relatif ou absolu.
  • Lien vers un e-mail
    Il existe une dernière sorte de lien très utile qui permet d'envoyer un e-mail. Pour cela, il suffit, dans l'attribut href : mailto: puis l'adresse e-mail désirée. Ce qui nous donne :
    Code :
    <a href="mailto:bnenfolie@gateau.bis">M'envoyer un e-mail</a>



Et voilà, nous en avons finit avec les liens ! Il n'y a rien de difficile, il suffit d'avoir compris le fonctionnement. Si vous gardez en tête le dessin de l'arbre, vous ne devriez pas avoir de problèmes.

Les images

Après ce que vous venez de lire, les images ne devraient pas trop vous poser de problèmes. En effet, la balise à utiliser pour afficher une image est la balise <img />. C'est donc une balise simple dont les attributs principaux sont :
  • src=" " Il faut y indiquer l'url, le chemin qui mène vers l'image. Vous savez faire puisque cela fonctionne de la même manière qu'un lien hypertexte mini_bn
  • alt=" " Il faut y indiquer le descriptif de l'image. (ce descriptif sera affiché si l'image n'existe pas ou si le visiteur a désactivé les images. Elle sera aussi lu par les moteurs de recherche ou les lecteurs de site Web.) Elle est obligatoire, si vous n'avez pas d'idée, laissez-la vide.
  • title=" " C'est le titre de l'image. Il apparait quand on laisse sa souris plus d'1s sur celle-ci.


Pour afficher l'image suivante :
document/exposition/2/crazy.gif

j'utiliserai donc le code suivant :
Code :
<img src="http://la-bnbox.fr/document/exposition/2/crazy.gif" alt="BN" />

Sympa, non ?

Structure du texte

S'il existe des balises permettant de mettre en valeur le texte (emphase) il en existe aussi ayant d'autres significations et même si elles sont, pour certaines, moins utilisées, elles peuvent parfois être bien utile.
  • <br /> Cette balise simple permet de sauter une ligne. On peut en mettre autant que l'on veut à la suite.
  • <ins></ins> Cette balise permet d'indiquer que le texte entre <ins> et </ins> vient d'être inséré. Cela indique donc une modification depuis la date de parution du texte. Généralement le texte est souligné.
  • <del></del> Cette balise permet d'indiquer un texte qui a été supprimé. (delete in english mini_bn) En général, le texte est alors barré.
  • <dfn></dfn> Cette balise indique que le texte est une définition. Le texte est généralement en italique.
  • <kbd></kdb> Cette balise indique un texte à taper (grâce à son clavier) pour le visiteur.
  • <sup></sup> Le texte entre <sup> et </sup> est mis en exposant. Comme ça : 42 = 16 mini_bn Pour mettre en indice, il faut utiliser <sub></sub>.
  • <q></q> Cette balise indique une citation courte d'une ligne environ. On peut lui ajouter l'attribut cite=" " qui contient alors l'url d'où provient la citation.
  • <cite></cite> Très similaire à <q></q>, cette balise indique une citation courte mais un peu plus longue, d'une ligne.
  • <code></code> Cette balise permet de signaler un code source informatique. Le code compris entre <code> et </code> est alors non-interprété mais simplement affiché.
  • <script></script> Cette balise nous permettra d'utiliser du Javascript sur nos pages Web. Cela dit, elle permet aussi d'utiliser d'autres langages. (comme le PHP, même si on l'emploie rarement pour cela) Inutile de s'appesantir là dessus pour l'instant, on y consacrera un chapitre plus tard bn_wink
  • <abbr></abbr> Cette balise permet de définir des abréviations ou des acronymes comme X.H.T.M.L. On met dans la "traduction" de cette abréviation dans l'attribut title=\" \" qui apparait alors en info-bulle ainsi :
    Code :
    <abrr title="eXtensible HyperText Markup Language">XHTML</abbr>

    Ce qui donne : XHTML (passez votre souris sur le mot XHTML mini_bn)
    Il existe aussi la balise <acronym> qui fonctionne de la même manière, mais qui est interprété différemment par les lecteurs de pages Web. Seulement voilà, la différence entre acronyme et abréviation est délicate (et je n'essayerai même pas de l'expliciter) et il existe de nombreux débats entres Webmasters à ce sujet. Néanmoins, il semblerait que c'est la balise <abbr> qui l'emportera au final, puisque le W3C (acronyme de World Wild Web Consortium et non abréviation bn_tongue) semble vouloir supprimer <acronym>. Mais enfin, rien n'est moins sûre bn_heureux


Balise générique

La seule balise inline générique est la balise <span></span> elle n'a aucun sens sémantique.
C'est une balise très utile mais à n'utiliser que lorsqu'il n'y a pas de sens précis, par exemple utiliser la balise <span> de cette manière est totalement idiot :
Code :
<span class="tres_important">Texte important</span>

En effet, on a vu qu'il existe la balise <strong> qui permet justement de mettre en valeur les textes important mini_bn


Nous en avons finit avec les balises de type inline ! Vous en avez déjà appris beaucoup et pourtant il faut continuer : place aux balises de type block !

Sémantique des balises block


Paragraphe de texte

Nous avons déjà vu plusieurs fois la balise <p> qui permet d'indiquer un paragraphe de texte. A chaque fois que vous utilisez du texte, préférez cette balise à d'autres mini_bn

La balise <p></p> fait exception à la règle des balises de type block puisqu'il est impossible de mettre une autre balise de type block entre <p> et </p>. Cela dit, c'est logique puisque c'est une balise qui indique un paragraphe de texte, donc elle ne doit contenir que du texte et des balises de types inline.


Titres

Les balises de titres sont très importantes puisque ce sont elles qui fixent le plan d'une page. Elles sont utiles à vos visiteurs, largement utilisées par les moteurs de recherches et de nombreux logiciels d'aide à la navigation s'en servent. Dès que vous aurez un peu d'expérience en XHTML, n'hésitez pas à prendre un peu de temps pour bien réfléchir aux titres de votre site.
Une balise de titre est de la forme suivante : <hx></hx> où x est un chiffre variant entre 1 et 6. Plus le chiffre est petit, plus le titre est important. Le navigateur interprètera cela par une taille et une graisse différente, mais encore une fois, c'est le sens sémantique qui est important, le rendu on s'en occupera avec le CSS bn_wink
Voici un petit exemple :
Code :
<h1>Gardez le sourire !</h1>
      <h2>Menu</h2>
        <p>
        - <a href="http://la-bnbox.fr/forum.html">
Comment garder le sourire ?</a>
        - <a href="http://la-bnbox.fr">Comment retrouver le sourire ?</a>
        </p>

      <h2>Mais de quoi parle ce site ?</h2>
        <p>Ce petit site sans prétention vous invite à garder le sourire en tout temps ! Pour cela, de nombreux trucs et astuces sont mis à votre disposition. Alors, n'hésitez plus : sourirez <img src="img/smilies/bn_wink.gif" alt="bn_wink" class="mode_smile" /></p>



Inutile de dire que le premier qui me fait quelque chose du style :
Code :
<p class="titre">Mon titre</p>

je l'étripe comme il se doit bn_heureux Si on a créé des balises spéciales pour les titres, c'est pas pour rien !

Structure de la page ou du texte

Il existe bien sûr d'autres balises de type block, mais elles sont en général moins utilisées, cela dit, parfois c'est utile bn_wink
  • <blockquote></blockquote> Cette balise indique que nous avons affaire à un citation longue. On peut lui ajouter l'attribut cite=\" \" qui contient alors l'url d'où provient la citation.
    Cette balise doit obligatoirement contenir une balise de type block (si possible une balise <p></p> vu que c'est un paragraphe bn_wink) on a donc :
    Code :
    <blockquote cite="http://bibleipsum.free.fr">
      <p>L'insensé dit en son coeur : il n'y a point de Dieu ! Ils se sont corrompus, ils ont commis des actions abominables ; il n'en est aucun qui fasse le bien. L'Éternel, du haut des cieux, regarde les fils de l'homme, pour voir s'il y a quelqu'un qui soit intelligent, qui cherche Dieu. Tous sont égarés, tous sont pervertis ; il n'en est aucun qui fasse le bien, pas même un seul. Tous ceux qui commettent l'iniquité ont-ils perdu le sens ? Ils dévorent mon peuple, ils le prennent pour nourriture ; ils n'invoquent point l'Éternel. C'est alors qu'ils trembleront d'épouvante, quand Dieu paraîtra au milieu de la race juste. Jetez l'opprobre sur l'espérance du malheureux... L'Éternel est son refuge. Oh ! qui fera partir de Sion la délivrance d'Israël ? Quand l'Éternel ramènera les captifs de son peuple, jacob sera dans l'allégresse, israël se réjouira.</p>
    </blockquote>

  • <hr /> Cette balise simple permet de tracer une ligne horizontale. Comme ceci :

  • <address></address> Cette balise indique l'affichage d'une adresse (email ou postale), d'une signature, ou d'un nom d'auteur. En général, le texte est mis en italique.
  • <pre></pre> Cette balise permet d'afficher le texte entre <pre> et </pre> tel qu'il est, avec les espaces et les sauts de ligne. On peut notamment l'utiliser pour faire des petits logos mini_bn Par exemple : (merci à DarKnight d'avoir retrouver cette petite chouette)
       ,__,
      (0,O)
    °(,,_,,)°
  • <object></object> Cette balise permet, la plupart du temps, d'utiliser des applications Flash. Je ne détaille pas pour l'instant car nous l'utiliserons plus tard bn_wink


Balise générique

La seule balise block générique est la balise <div></div> elle n'a aucun sens sémantique.
C'est une balise très utile mais à n'utiliser que lorsqu'il n'y a pas de sens précis, par exemple utiliser la balise <div> de cette manière est totalement idiot :
Code :
<div class="citation">Une longue citation d'Albert Einstein</div>

En effet, on a vu qu'il existe la balise <blockquote> qui permet d'afficher une citation bn_accord




Nous voilà enfin arrivé à la fin de notre voyage au pays de la sémantique XHTML ! Désormais, vous connaissez de nombreuses balises XHTML (presque toutes en fait. Il ne reste plus que des balises bien spécifiques que nous verrons au fil du cours mini_bn) et même s'il vous faudra peut-être revenir souvent sur ce chapitre pour bien l'assimiler, vous avez désormais suffisamment de connaissances pour que l'on puisse aborder le CSS mini_bn (enfin bn_heureux)
Reposez-vous bien, parce qu'au prochain cours c'est un tout nouveau langage et une toute nouvelle manière de penser une manière un peu différente de penser que je vais vous apprendre !

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

annelastar proclame : C'est trop facile Aujourd'hui, 15h01 via Résumé - Les Fourberies De ...

cartman proclame : Bruh Hier, 8h19 via Texte intégral - Le Médecin...

bob bafouille : Bgvgfcgt Hier, 8h19 via Texte intégral - Le Médecin...

jack gribouille : I gota agirls friends Le 08 décembre, 16h21 via Résumé - Le Médecin Malgrè ...

ddd déclame : Slt Le 07 décembre, 19h00 via Résumé - Les Fourberies De ...

ghg bafouille : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg tergiverse : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg chuchote : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg scribouille : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg déclare : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg murmure : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg murmure : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg déclare : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg tergiverse : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg murmure : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg chuchote : Mm Le 07 décembre, 17h14 via Résumé : L'Avare

ghg déclare : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg s'exclame : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg écrit : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg bafouille : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg déclare : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg s'exclame : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg déclare : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg chuchote : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg dit : M Le 07 décembre, 17h14 via Résumé : L'Avare

ghg gribouille : M
mm
Le 07 décembre, 17h14 via Résumé : L'Avare

ghg proclame : M
m
m
m
m

m
m
m
m
Le 07 décembre, 17h14 via Résumé : L'Avare

ghg scribouille : Hola Le 07 décembre, 17h14 via Résumé : L'Avare

booya écrit : Facile Le 07 décembre, 17h11 via Résumé : L'Avare

heyy tergiverse : Bjrs Le 06 décembre, 17h00 via Résumé - Les Fourberies De ...

amin bafouille : Lol Le 05 décembre, 21h11 via Résumé - Le Médecin Malgrè ...

nutellux bafouille : Bon Le 05 décembre, 20h53 via Résumé scène par scène - Le...

yo bafouille : Tg Le 05 décembre, 18h33 via Résumé : On ne badine pas a...

lol griffonne : Ook Le 04 décembre, 18h33 via Résumé - Les Fourberies De ...

Madson griffonne : Je m'appelle Mady Ouedraogo .je vous dit: nous devons accomplir nos devoirs.defendre nos droits fait partie de nos devoirs Le 04 décembre, 9h46

Pierre Corneille scribouille : Je m'appelle Pierre Corneille je suis mort le 2 décembre je meur avec la chimère Le 02 décembre, 13h49 via Résumé du livre : Le Cid de...

reptilause murmure : TG Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause scribouille : Salut bande
de BN
Le 02 décembre, 13h48 via Résumé du livre : Le Cid de...

reptilause tergiverse : Reptileuse Le 02 décembre, 13h47 via Résumé du livre : Le Cid de...

Xeno déclare : Ok on y gagne quoi Le 30 novembre, 16h38 via Texte intégral - L'Avare de...

bobo écrit : WTF le calcul !*
Des barres!
Le 28 novembre, 20h31 via Résumé : La Promesse de l'a...

bobo scribouille : Merci!
Ca va me servir!
Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

bobo s'exclame : Tchippppppppp Le 28 novembre, 20h30 via Résumé : La Promesse de l'a...

mimi déclame : Qui aime chica vampiro ou bien qui a deja vu chica vampiro Le 28 novembre, 12h24 via Résumé - Les Fourberies De ...

lol bafouille : Lol le calcul Le 27 novembre, 15h50 via Mémo de VHDL

jenpierrdecou écrit : Et les armes en diamant sur bo2 Le 26 novembre, 14h22 via Résumé : L'Avare

jenpierrdecou déclame : Ctrl+w et vous avez argent illimité sur gta Le 26 novembre, 14h21 via Résumé : L'Avare

jenpierrdecou bafouille : Lololollolol Le 26 novembre, 14h21 via Résumé : L'Avare

jen déclare : Oké Le 26 novembre, 14h20 via Résumé : L'Avare

123 gribouille : Slttttttt Le 26 novembre, 13h23 via Résumé : Le Mariage de Figa...

Publicité



©Bnbox (Infos) - Cahier de l'élèves - Atelier webmaster - Boîte à Nuts - Bar à Nougat - Plus ou moins valide XHTML 1.0, CSS 2, RSS 2.0
Flux RSS