La Bnbox !

Créateur de sourires...

Mon compte

S'inscrire

Recherche

Vous êtes ici : Accueil » Atelier Webmaster » Liste des articles

Atelier Webmaster



Cours XHTML/CSS

Comment vous expliquer en quelques lignes ce qu'est le XHTML/CSS ? Le XHTML/CSS c'est en fait deux langages de programmation : le XHTML et le CSS ; intimement liés au point de ne former plus qu'un. C'est le langage principal pour concevoir des pages Web car il permet de créer la structure, le contenu et de faire la mise en page d'un site Web. C'est donc des sites Internet que nous allons apprendre à créer dans ce cours mini_bn
Petit cours d'histoire : le XHTML/CSS est une nouvelle version du HTML (plus précisément une reformulation de HTML 4 en XML 1.0) mis en place par le W3C pour que les sites Internet soient accessibles par tout le monde (même aux personnes handicapés comme les mal-voyants) et de n'importe quelle plate-forme (entres autres sur tous les navigateurs Web) c'est ce qu'on appelle : la standardisation. Mais n'allons pas si rapidement, vous êtes la pour apprendre, donc nous commencerons par poser des bases solides sur lesquelles vous pourrez vous appuyer bn_wink Si vous connaissez déjà la programmation en HTML : alors il va vous falloir réapprendre plein de choses, mais vous noterez sûrement des similitudes bn_wink Si vous pensez déjà tout connaître de la programmation en XHTML/CSS, éh bien j'espère avoir l'honneur de pouvoir vous prouver le contraire. Et si vous ne connaissez rien à la programmation de sites Internet, rassurez-vous, nous allons commencer en partant du niveau 0.
Vous allez très vite vous en rendre compte, mais l'XHTML/CSS permet de faire des sites Web très fonctionnels et très beaux.


Nous allons faire l'impossible pour que, dès les premiers chapitres, vous puissiez faire quelque chose de potable (de pas trop moche quoi bn_heureux) pour qu'ainsi vous ayez l'envi de vous entrainer tout seul. L'expérience vaut plus que tous les cours théoriques du monde ! Alors bon, on va essayer et on verra ce que ça donne.

Sommaire



Conférence XHTML/CSS

Mettons du texte en forme (1ère partie)

A l'abordage des CSS

La sémantique du XHTML

Une première page en XHTML

Préparatifs préliminaires


Remonter Navigation rapide : Sommaire

Préparatifs préliminaires

Pour partir sur de bonnes bases il va nous falloir comprendre ce que nous allons apprendre dans ce cours. Mais avant cela, je vais peut-être me présenter : je me fais appeler Bnmaster et c'est moi qui vais vous guider tout au long de ce cours ! Inutile de vous dire que vous aller en baver, hum, hum...

On a vu dans l'introduction que le XHTML dérive du HTML, mais que cela soit clair dès maintenant : ce sont deux langages bien distincts. (quoi que similaire sur la forme) Le XHTML est beaucoup plus strict au niveau de la programmation que le HTML c'est ce qui fait qu'il est le plus utilisé à l'heure actuelle. (jusqu'à un retour du HTML sur le devant de la scène, peut-être plus rapidement qu'on ne le pense)

Pour ne pas perdre trop de temps, si l'HTML vous intéresse, allez lire le cours d'HTML de la Bnbox.


Il faut aussi bien différencier le XHTML du CSS. Présentons les plus précisément tous les deux :

Le XHTML


Le XHTML est le langage qui va nous permettre d'afficher le contenu de nos pages Web. C'est-à-dire que l'on va demander à l'ordinateur les choses suivantes : "affiche ce morceau de texte, affiche cette image, fait un tableau avec tel texte à l'intérieur". En fait c'est exactement comme cela que cela fonctionne : on donne des instructions à l'ordinateur. Mais malheureusement l'ordinateur ne comprend pas très bien notre langue... A vrai dire, il parle en 0 et en 1 ! Alors pour toutes les personnes comme vous (je suppose) et moi qui ne parle pas en 0 et en 1, on a inventé des langages compréhensibles par les humains et par les ordinateurs. Le XHTML est un langage informatique assez simple, il en existe des plus compliqués comme le PHP ou le C par exemple.
Ainsi donc, pour dire à notre ordinateur d'afficher du texte on va lui dire quelque chose du genre :
Code :
<texte>Merci cher ordinateur d'avoir bien voulu affiché ce texte, c'est sympa de ta part !</texte>

Une image :
Code :
<image>Merci cher ordinateur d'avoir bien voulu affiché l'image qui a pour nom image.jpg</image>


Le seul hic dans tout ça c'est que le langage XHTML est un chouille plus compliqué ! (bah sinon j'aurais rien à vous apprendre bn_heureux) A partir de maintenant j'utiliserai le véritable langage XHTML. Je n'expliquererai pas tous les exemples dès le début, mais petit à petit... Comme ça vous aurez le temps de tout assimiler mais vous aurez aussi de l'avance quand j'expliquerai un exemple déjà utilisé bn_tongue

Le CSS


Le CSS quant à lui va nous permettre de faire la mise en page, de concevoir le design de notre page Web. De la même manière qu'avec le XHTML on va dire à l'ordinateur : "Affiches ce texte à tel endroit et colorie-le en bleu. Mets tel en image en fond de tel tableau et centres le texte dans les cellules de ce tableau." Mais bien entendu ce langage n'est pas le même que le XHTML ! (ce serait trop simple bn_tongue) Cependant on va s'appuyer sur les ordres que nous avons donner à l'ordinateur en XHTML pour faire la mise en page. C'est-à-dire que l'on va appliquer le CSS sur les "ordres" du XHTML. Vous verrez cela plus concrètement dans la suite du cours, patience !

Nous n'aborderons pas le CSS dans les premiers chapitres, mais ensuite on l'utilisera tout le temps !

Où travailler ?


C'est vrai que j'ai l'air malin avec mes explications mais cela ne nous dit pas comment est ce que l'on va travailler. Hé bien je vous présente votre plus fidèle compagnon de programmation :
document/atelier/bloc_notes.gif


C'est joli hein ? Comment ça, vous n'aimez pas ! Pourtant cela suffit amplement. Le Bloc-notes qui est fourni par défaut avec Windows (pour y accéder : Démarrer/Tous les programmes/Accessoires/Bloc-notes), où équivalent sur d'autres OS, est l'endroit idéal pour parler avec l'ordinateur afin qu'il puisse interpréter ce que nous lui disons.

Si vous utilisez une autre plate-forme que Windows, fouillez un peu et vous devriez bien trouver quelque chose vous permettant d'écrire du texte.


Mais en fait, un code peut devenir assez rapidement difficile à lire dans le bloc-notes. Pour retrouver une ligne de code précisément sur tout un tas de lettres, le tout sur un fond blanc, lettres noires... disons que ce n'est pas ce qu'il y a de plus pratique ! Voilà pourquoi certains logiciels colorient votre code pour que vous puissiez mieux vous y repérer. (en plus de cela ils possèdent d'autres fonctionnalités comme la fonction de recherche et de remplacement à la volée.)
Pour vous citer deux de ces logiciels qui se valent, je parlerai de : Notepad++ et PSPad Editor. Pour me part, j'utiliserai Notepad ++ pour ce cours puisque c'est celui que je connais le mieux bn_wink Voici donc un petit screenshot de la bête :



Si vous êtes sous Mac, vous pouvez utiliser Smultron.
Si vous êtes sous Linux, vous avez certainement déjà un logiciel approprié comme Emacs ou Vim. Bluefish est particulièrement adapté à la programmation Web.

Où visualiser notre travail ?


Nous allons concevoir un site Internet, non ? Alors nous allons visualiser notre travail sur un navigateur Web. Tout simplement !
Le plus connu d'entres eux est Internet Explorer. Il est fournit par défaut avec Windows et se retrouve aussi sur Mac. La dernière version de ce logiciel est la version 7 mais la 6 reste la plus répandue. (Au passage, la version 8 est en cours de conception) Or cette version 6 date de... de la sortie de Windows XP ! C'est-à-dire il y a très longtemps à l'échelle de l'informatique. Quand on voit la vitesse à laquelle évolue le monde informatique de nos jours, on se demande comment un navigateur aussi ancien peut encore être autant utilisé ! Vous verrez durant ce cours que nous allons être très souvent freiné par l'ancienneté de ce navigateur. (et même la version 7 nous posera quelques soucis) Pourtant il va falloir nous y plier, tout du moins si nous voulons que nos pages Web soient accessible par tous ! (ce qui est le but du XHTML/CSSS rappelons-le bn_heureux)

Il existe plusieurs alternatives à ce navigateur. Le navigateur Firefox, développé par la fondation Mozilla (qui en est actuellement à sa version 2, la version 3 étant en cours de création) est l'une d'elle et trouve de plus en plus d'adeptes sur la toile. Je ne pourrai que vous le conseiller car c'est un très bon navigateur, entièrement gratuit (bien sûr) souvent mis à jour et surtout : récent mini_bn Pour le télécharger : site officiel de Firefox.


Je citerai aussi le navigateur Opéra qui est tout aussi bien (voir mieux sur certains points) que Firefox. Pour le télécharger : site officiel d'Opéra.

Internet explorer, Firefox et Opéra peuvent très bien fonctionner tous les trois ensembles ! Et ces deux derniers peuvent être désinstallés s'ils ne vous plaisent pas ! Je vous conseille de les télécharger dès maintenant (même si vous ne comptez pas les utiliser pour surfer) car si vous voulez que tous les visiteurs puissent accéder à vos pages, il faudra tester votre site sur ces navigateurs ! (eh oui, car l'affichage ne sera pas le même sur Internet Explorer que sur les deux autres navigateurs plus récents.)


Peut-être que vous vous dites que je suis un vieux grincheux qui ne fait que critiquer, une nouvelle fois, le bien connu : Windows ! Que je suis un petit trop abrupt à propos Internet Explorer (abrégé en IE) et que quant même, si Internet Explorer est utilisé par autant de personnes dans le monde c'est que cela ne doit pas être un navigateur aussi nul que ça ! Je vous rassure tout de suite, je ne suis ni vieux (enfin je crois pas) ni grincheux ! (je suis un Bnmaster rappelez-vous ! Et dans Bnmaster y a BN et un BN... bah ça sourit bn_big_smile)
Le W3C qui a pris en charge la création du XHTML/CSS est un organisme qui a pour rôle d'assurer que tout le monde puisse accéder au Web, correctement... Il y a quelques années les navigateurs se livraient une guerre sans merci ! Notamment Internet Explorer et Netscape Navigator. Microsoft et Netscape inventaient des balises HTML que seul leur navigateur pouvait lire, espérant ainsi forcer le ou les concurrents à l'implanter sur leur logiciel, si la dites balise était utilisée par beaucoup de programmeurs. Tout ceci au détriment des usagés bien entendu... Voilà pourquoi des règles ont été créé afin de "standardiser" tout ce joyeux bazar ! Règles créées par le W3C. En plus de ça se sont des bonnes règles, puisque, grâce à elles, les webmasters peuvent programmer avec plus de libertés. (paradoxalement bn_heureux) Mais je m'arrêterai là quant aux standards du Web et au W3C, je vous renvoie par contre vers cet article du Site Du Zéro qui explique cela bien en détails : Allez à l'article du Site du Zéro.

Si vous débutez tout juste dans la programmation, ce lien vous sera foncièrement inutile pour l'instant. Vous pouvez tout à fait le laissez tomber, mais dès que vous aurez avancer un peu plus dans la connaissance du XHTML/CSS, je vous encourage fortement à lire cet article.

Mettre notre site en ligne


En sommes, désormais vous savez à peu près comment nous allons programmer nos pages Web. Vous savez où est ce que nous allons travailler et où est ce que l'on va voir le résultat. Maintenant il faudrait savoir comment faire pour que ce résultat soit accessible par tous ! Plus concrètement : comment "mettre en ligne" notre site Web. Pour répondre à cette question, je vous renvoie à un mini-cours de l'Atelier Webmaster qui vous expliquera tout en détails : utiliser le FTP. (vous n'aurez besoin de lire ce mini-cours que lorsque vous aurez créé un début de site. Donc, si vous êtes du genre "pressé", passez directement au cours suivant, et retournez lire ce mini-cours quand vous en aurez besoin bn_heureux)

Voilà ! Nous avons posé les bases ! Dans le prochain chapitre nous allons attaquer le concret, mais avant il fallait se préparer. On se dit donc à tout bientôt. (le temps que vous cliquiez sur Cours suivant quoi bn_wink)



Remonter Navigation rapide : Sommaire

Une première page en XHTML

Maintenant que nous avons fait le tour théorique de ce qu'était le XHTML/CSS il va falloir voir concrètement ce que cela donne, et on va commencer par le XHTML !

Structure d'une page XHTML


Nous avons vu que, pour écrire du texte, nous devions dire à notre ordinateur que nous allons écrire du texte ; pour mettre une image ou un tableau, nous devions le dire à notre ordinateur. Mais avant tout cela il faut que l'on prévienne l'ordinateur de ce que l'on va faire. Il faut qu'on lui dise : "Salut, je vais te parler en XHTML, ma page sera en Français et..." et on va lui dire encore quelques autres trucs !  ça semble logique non ? bn_unsure
Toutes ces informations on les met dans ce qu'on appelle : l'entête.
Ce n'est qu'après avoir remplit l'entête que l'on passera à une autre partie appelée : le corps, dans lequel nous mettrons ce qui s'affichera concrètement à l'écran.
Notre page XHTML aura donc le schéma suivant :
document/atelier/presentation_doc.png


Ceci étant dit, maintenant faites attention, ouvrez grand vos yeux car vous allez découvrir pour la première ce qu'est une page XHTML ! Vous êtes prêt ? Alors c'est parti :

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>Attention : mon premier titre !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>

   <body>
        <p>
        C'est la première page XHTML de toute ma vie !
        </p>

   </body>
</html>



Alors ça fait quel effet ? Mais non, ne partez pas, ça parait un peu barbare vu comme ça, mais c'est pas bien compliqué à comprendre !

Maintenant voilà ce que je vous demande de faire :
  • Faites un Copier/Coller de ce code dans Notepad++.
  • Enregistrez votre document en .html. Pour cela il suffit de faire Enregistrez sous (ou ctrl+S) de nommer votre document (par exemple "pageWeb") est juste après ce nom d'écrire .html. Ce qui nous donne : "pageWeb.html". Modifiez aussi le type est placez-le sur quelque chose qui ressemble à HTML file. Maintenant, cliquez sur enregistrer bn_wink

Un petit récapitulatif en image :
document/atelier/enregistrement.png

Il ne vous reste plus qu'à ouvrir votre document sous votre navigateur (Fichier/Ouvrir un fichier ou ctrl+O) pour voir le résultat mini_bn
Eh oui, tout ce charabia ne vous affiche qu'une simple phrase : C'est la première page XHTML de toute ma vie ! Mais c'est déjà pas mal, non ? bn_heureux

Une fois que vous visionner votre document .html sous votre navigateur, vous pouvez retrouver le code source de la page (votre code) en faisant : Clique droit/Afficher la source. Retenez cette technique car cela sert très souvent !


Maintenant vous avez une vision globale de la chose ! Nous allons tout de suite la décortiquer petit bout par petit bout.

Une langage qui balise... à l'attribut !


Peut-être vous êtes vous rendu compte que dans les exemples que j'ai donné dans le premier chapitre et celui juste au-dessus, à chaque fois que je donnais une information à l'ordinateur  j'utilisais quelque chose de la forme : <blabla> C'est ce qu'on appelle : une balise.
Le XHTML est un langage à balise et à partir de maintenant, nous allons en utilisant tout le temps ! Il faut donc bien comprendre leur fonctionnement.
Balises

Il existe deux formats de balises et même un troisième mais qui est un peu différent :
  • Les balises doubles : les plus courantes. Ce sont deux balises qui fonctionnent ensembles. L'une est dites ouvrante, l'autre est dites fermante. Elles ont le même nom mais il y a un slash (/) avant le nom de la balise fermante. Un petit exemple :
    Code :
    <p>Heureux l'homme qui ne marche pas selon le conseil des méchants.</p>
  • Les balises simples : ce sont des balises qui agissent seules. En XHTML toutes les balises doivent être fermées, par conséquent, on rajoute un slash  ( /) après le nom de telles balises. Ce qui nous donne :
    Code :
    <hr /> Ou encore <img />

    Notez la présence de l'espace entre le nom de la balise et le slash : il est important !
  • Les balises de commentaires : ce sont des balises permettant de cacher quelque chose. En effet ce qui se situe entre deux balises de commentaires ne s'affichera pas sur la page Web, par contre il s'affichera dans la source c'est-à-dire dans le bloc-notes, là où vous avez écrit votre code. Vous vous dites peut-être que c'est inutile, mais en réalité c'est très pratique ! En effet il est parfois difficile de s'y retrouver dans un code qui est souvent compliqué, et si quelqu'un doit le relire, pour vous aider ou l'améliorer, il aura encore plus de mal à comprendre que vous. Grâce à ces balises, vous pouvez donc commenter votre code (d'où leur nom bn_wink) n'hésitez pas à le faire aussi souvent que possible. Moi je m'en servirai pour écrire des annotations dans mes codes, afin que vous les compreniez mieux. Une balise de commentaire s'ouvre avec <!-- et se ferme avec --> Tout ce qui sera entre ces deux crochets ne sera pas visible sur le navigateur. Ce qui nous donne :
    Code :
    <!-- Ceci ne sera pas visible sur le navigateur, alors je peux commenter tranquillement -->
    <p>Par contre ce texte-ci sera visible !</p>

Les attributs

Mais une balise peut aussi contenir des attributs ! Mais qu'est-ce qu'un attribut ? C'est tout simplement quelque chose que l'on va rajouter à une balise pour donner des précisions ou modifier son fonctionnement. (on peut aussi, en Javascript, rendre cette balise interactive avec l'environnement)

Concrètement, l'attribut va se placer dans la balise ouvrante, juste après le nom de la variable. (séparé par un espace) Un attribut est de la forme : nomdel'attribut="information". Puis on referme la balise normalement. (avec un slash si c'est une balise simple ou avec une balise fermante si c'est une balise double.)
Ce qui nous donne :
Code :
<p class="centrer">Je précise un attribut qui, plus tard, me permettra de centrer ce texte.</p>

<hr class="separation" /><!-- je peux aussi utiliser un attribut pour les balises simples -->

<img scr="image/smile/9.gif" alt="Clein d'oeil" /><!-- je peux mettre plusieurs attributs dans une seule balise -->

Résumons

Vous savez désormais tout sur les balises ! Comme je l'ai déjà dit, c'est très important, alors n'hésitez pas à relire cette partie du cours une seconde fois pour être sûr d'avoir bien tout compris bn_wink Voici en tout cas la liste résumée, mais précise, de ce que vous pouvez faire et ne pas faire avec une balise :
  • Trois formats de balises : les doubles (<balise></balise>) les simples (<balise />) celles de commentaires (<!-- Commentaires -->).
  • Une balise commence toujours par un < et finit toujours par >
  • Le nom des balises ne doit contenir aucune majuscule ni espace !
    Exemple : On pourra écrire <p>Salut, comment va ?</p> mais pas <P>Salut, comment va ?</P>
  • Les noms d'attributs ne peuvent pas non plus contenir de majuscules ni d'espaces, par contre les informations des attributs peuvent contenir n'importe quoi ! (majuscules, espaces...)
    Exemple : On pourra écrire <a href=\"test.html\" title=\"Salut les cocos c'est l'url de mon site !\">Salut les cocos</a> mais pas <a href=\"test.html\" super titre=\"Salut les cocos c'est l'url de mon site !\">Salut les cocos</a>

L'entête de la page


Revenons au code de notre page XHTML. L'entête, c'est-à-dire la partie de code qui regroupe toutes les informations nécessaire au navigateur pour bien interprété notre page, est composé du code suivant :
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>Attention : mon premier titre !</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>


Décomposons chaque balise une à une :
  • Le Doctype : Cette balise particulière qui ne respecte pas les règles que je vous ai donné (bah oui, il faut bien un exception bn_wink) sert à préciser au navigateur quelle version du XHTML nous utilisons. Ici le XHTML 1.0 Strict. C'est l'une des versions les plus récentes et la plus utilisée.
  • <html></html> : Cette balise entoure tout notre document XHTML, la balise fermante </html> se trouve donc tout à la fin de la page.
    Le premier attribut xmlns=\"\" (obligatoire) contient un url qui pointe vers les spécifications du W3C sur le XHTML. (rappelez-vous, le W3C est l'organisme qui a standardisé l'HTML)
    Le deuxième attribut xml:lang=\"\" permet de préciser quelle langue vous allez utiliser sur votre page. Ici c'est le français bn_heureux (on pourrait utiliser en pour l'anglais, it pour l'itatlien ou de pour l'allemand par exemple)
  • <head></head> : En anglais Head signifie Tête. Entre ces balises, on va pouvoir préciser pas mal de choses :
    • <title></title> : Cette balise permet de préciser le titre de la page qui apparaît à l'endroit suivant : (le screen a été pris sous Firefox, mais le résultat est le même sur d'autres navigateurs)
      document/atelier/titrePage.jpg

      Ce titre n'est pas à négliger, car en plus d'informer vos visiteurs, il est très utilisé par les moteurs de recherche pour connaître le sujet de votre site Web.
    • <meta></meta> : Ici cette balise sert à préciser que vous allez utiliser le jeu de caractère iso-8859-15, c'est-à-dire que vous souhaitez vous servir des caractères propres à la langue française comme éèàùôï礽... (éh oui, ces caractères n'existent pas dans toutes les langues) Il existe d'autres jeux de caractères comme le utf-8 ou le iso-8859-1 mais le iso-8859-15 suffira bien pour l'instant.

      La balise <meta></meta> avec d'autres attributs permet de faire tout un tas d'autres choses, comme par exemple, lister les mots-clés important de votre site pour faciliter la tâche des moteurs de recherche. De nos jours ces fonctionnalités ne sont plus tellement utiles et donc pour l'instant, seuls les attributs que je vous ai présenté nous intéresse vraiment bn_wink

Le corps de la page


Alors, maintenant vous savez comment former l'entête d'un document XHTML et vous savez utiliser des balises. Il me reste encore à vous montrer où est ce que vous allez mettre le contenu de toute vos pages ! C'est là :
Code :
   <body>
<p>
C'est la première page XHTML de toute ma vie !
</p>

   </body>

Body signifie corps en anglais. Par conséquent en utilisant la balise <body></body> vous annoncez au navigateur à quel endroit sera le contenu de votre site, vous lui dites clairement : tout ce qui se trouve entres ces deux balises, tu l'affiches.

Si on reprend le schéma du début de ce chapitre en le complétant cela nous donne donc :
document/atelier/presentation_doc2.png


Le corps de votre document va donc contenir tout un tas d'autres balises, qui vous permettront d'afficher tous les textes de votre site, les images... Mais ces balises seront aussi l'armature de votre design ! (nous verrons cela tout bientôt avec le CSS)

Nous allons d'ailleurs avoir un exemple tout de suite. Dans mon code j'ai utilisé la balise <p></p>. P comme Paragraphe. Cette balise indique que ce qu'elle contient est un paragraphe de texte. Donc à chaque fois que vous y écrivez un texte un tant soit peu long : utilisez la balise <p></p>. Ici je n'ai mis qu'une seule phrase, mais je peux très bien en mettre bien plus, autant que je veux !

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>Trois paragraphes</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>

   <body>
<p>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.

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 !

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 !</p>

   </body>
</html>



Et la : c'est le drame ! J'ai mis un espace entre mes deux paragraphes dans mon code source et cela n'apparait pas sur le navigateur, misère... Non, ce n'est pas une erreur, pas du tout ! Simplement lorsque le navigateur interprète votre page il place tout bout à bout ! Il passe outre les sauts de lignes et ne les affiche pas. De même, si vous mettez trois espaces à la suite, le navigateur n'en affichera qu'un seul.

Cela est fait exprès. Imaginons que nos navigateurs interprètent les sauts de ligne : cela voudrait dire que l'on devrait mettre toutes nos balises les unes à la suite des autres pour que cela ne rajoute pas d'espace ! Ce serait vraiment une catastrophe...

Il va donc falloir indiquer à notre navigateur où est-ce qu'il doit sauter des lignes. Pour cela nous allons utiliser la balise prévu à cet effet : <br />.

Remarquez au passage que c'est une balise simple.

Cette balise indique au navigateur va à la ligne !. Vous en aurez souvent besoin.
Cela nous donne donc :
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>Trois paragraphes</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
<p>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.

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 !

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 !</p>

   </body>
</html>



Voilà qui commence à devenir plus clair, n'est-ce pas ?

Un dernier exemple avant de clore ce deuxième chapitre.
Afin de vous faire entre-apercevoir une notion très importante (sur laquelle nous reviendrons plus en détails dans les chapitres suivants) j'aimerai vous montrer le code suivant :
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>Trois paragraphes séparés</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>

   <body>
<p>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.</p>

<p>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 !</p>

<p>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 !</p>
   </body>
</html>



Alors là, logiquement si vous avez bien suivi ce que j'ai dit avant, vous devriez dire :
Sale menteur ! Tu nous avais dit que les navigateurs ne prenaient pas en compte les espaces de mon code source et là : pof ! Y a un espace entre mes deux paragraphes !

Je l'ai dit et je le répète : les navigateurs passent outre les sauts de ligne et ne les affichent pas.
Reste à résoudre cette mystèrieuse énigme bn_tongue Il faut que vous sachiez qu'en XHTML il existe deux types de balises : les balises de type block et les balises de type inline.
  • Les balises de type block . Ces balises ont la particularité d'avoir un retour à la ligne avant et après elle. (c'est d'ailleurs ainsi qu'on les reconnait !) Comme leur nom l'indique, les balises de type block vont agir comme des blocs sur votre page web. Blocs que nous allons pourvoir empiler, emboîter, superposer...
  • Les balises de type inline. Ces balises ne sont ni précédées, ni suivies d'un retour à la ligne, par contre elles doivent OBLIGATOIREMENT être contenu dans une balise de type block.


Je parle de "format" pour dire balise double, simple ou de commentaire et de "type" pour dire balise block ou inline. Mais c'est juste du jargon à moi bn_wink


Nous en déduisons donc que la balise <p></p> est de type block bn_accord

Voilà nous arrivons à la fin de ce chapitre, chapitre au cours duquel vous avez dû ingurgiter beaucoup de choses ! (prenez le temps de digérer avant d'enchainer sur le prochain bn_heureux)

Vous savez désormais créer une page XHTML et avec les quelques connaissances que vous avez en balise, vous pouvez même vous lancer à faire quelques tests tout seul en modifiant le corps du document ! C'est-à-dire, rappelons-le, ce qui se situe entres les balises <body></body> Vous serez vite limité, car ce que nous avons vu dans ce dernier paragraphe n'est pas très complet. Néanmoins cela vous donne un aperçu de ce que nous allons faire pour programmer nos pages Web et croyez-moi, vous en saurez bientôt beaucoup plus !




Remonter Navigation rapide : Sommaire

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 !



Remonter Navigation rapide : Sommaire

A l'abordage des CSS



Voilà déjà deux chapitres que nous ne faisons que parler du XHTML. Vous connaissez désormais la structure d'une page Web, la structure des balises XHTML et la signification d'une grande partie de ces balises. En théorie, en me lisant, vous devriez vous dire :
Bon, en gros t'es en train de me dire que je connais l'XHTML et que je n'ai plus grand chose à apprendre... pourtant, si je regarde les pages que j'arrive à créer, ce n'est franchement pas brillant !

Hé oui, par exemple, vous pouvez créer un site sur les plantes carnivores très facilement en utilisant une structure du genre :

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 du site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
        <h1 id="haut">Titre du site</h1>
           <p>Slogan du site</p>

        <h2>Menu</h2>
          <a href="" title="">Lien n°1</a> |
          <a href="" title="">Lien n°2</a> |
          <a href="" title="">Lien n°2</a>

        <h2>Titre n°1</h2>
          <p>Paragraphe n°1</p>

        <h2>Titre n°2</h2>
          <p>Paragraphe n°2</p>

<p>Copyright - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
   </body>
</html>



Il ne vous reste plus qu'à remplir le site avec le contenu que vous voulez :

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>Les plantes caaarnivores</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
   </head>
   <body>
        <h1 id="haut">Les plantes caaarnivores</h1>
           <p>Parce que la nature aussi est cruelle</p>

        <h2>Menu</h2>
          <a href="accueil.html" title="Accueil de Caaarnivores">Accueil</a> |
          <a href="lexique.html" title="Lexique sur les plantes carnivores">Lexique</a> |
          <a href="livreOr.html" title="Livre d'or pour laisser vos impressions">Livre d'or</a>

        <h2>Mais pourquoi caaarnivores ?</h2>
          <p>Non pas à nous, Éternel, non pas à nous, mais à ton nom donne gloire, a cause de ta bonté, à cause de ta fidélité ! Pourquoi les nations diraient-elles : où donc est leur Dieu ? Notre Dieu est au ciel, il fait tout ce qu'il veut. Leurs idoles sont de l'argent et de l'or, elles sont l'ouvrage de la main des hommes. Elles ont une bouche et ne parlent point, elles ont des yeux et ne voient point, elles ont des oreilles et n'entendent point, elles ont un nez et ne sentent point, elles ont des mains et ne touchent point, des pieds et ne marchent point, elles ne produisent aucun son dans leur gosier. Ils leur ressemblent, ceux qui les fabriquent, tous ceux qui se confient en elles. Israël, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Maison d'Aaron, confie-toi en l'Éternel ! Il est leur secours et leur bouclier. Vous qui craignez l'Éternel, confiez-vous en l'Éternel ! Il est leur secours et leur bouclier. L'Éternel se souvient de nous : il bénira, il bénira la maison d'Israël, il bénira la maison d'Aaron, il bénira ceux qui craignent l'Éternel, les petits et les grands ; l'Éternel vous multipliera ses faveurs, a vous et à vos enfants. Soyez bénis par l'Éternel, qui a fait les cieux et la terre ! Les cieux sont les cieux de l'Éternel, mais il a donné la terre aux fils de l'homme. Ce ne sont pas les morts qui célèbrent l'Éternel, ce n'est aucun de ceux qui descendent dans le lieu du silence ; mais nous, nous bénirons l'Éternel, dès maintenant et à jamais. Louez l'Éternel !</p>

        <h2>Je peux participer ?</h2>
          <p>Louez l'Éternel, car il est bon, car sa miséricorde dure à toujours ! Louez le Dieu des Dieux, car sa miséricorde dure à toujours ! Louez le Seigneur des seigneurs, car sa miséricorde dure à toujours ! Celui qui seul fait de grands prodiges, car sa miséricorde dure à toujours ! Celui qui a fait les cieux avec intelligence, car sa miséricorde dure à toujours ! Celui qui a étendu la terre sur les eaux, car sa miséricorde dure à toujours ! Celui qui a fait les grands luminaires, car sa miséricorde dure à toujours ! Le soleil pour présider au jour, car sa miséricorde dure à toujours ! La lune et les étoiles pour présider à la nuit, car sa miséricorde dure à toujours ! Celui qui frappa les Égyptiens dans leurs premiers-nés, car sa miséricorde dure à toujours ! Et fit sortir Israël du milieu d'eux, car sa miséricorde dure à toujours ! A main forte et à bras étendu, car sa miséricorde dure à toujours ! Celui qui coupa en deux la mer Rouge, car sa miséricorde dure à toujours ! Qui fit passer Israël au milieu d'elle, car sa miséricorde dure à toujours ! Et précipita Pharaon et son armée dans la mer Rouge, car sa miséricorde dure à toujours ! Celui qui conduisit son peuple dans le désert, car sa miséricorde dure à toujours ! Celui qui frappa de grands rois, car sa miséricorde dure à toujours ! Qui tua des rois puissants, car sa miséricorde dure à toujours ! Sihon, roi des Amoréens, car sa miséricorde dure à toujours ! Et Og, roi de Basan, car sa miséricorde dure à toujours ! Et donna leur pays en héritage, car sa miséricorde dure à toujours ! En héritage à Israël, son serviteur, car sa miséricorde dure à toujours ! Celui qui se souvint de nous quand nous étions humiliés, car sa miséricorde dure à toujours ! Et nous délivra de nos oppresseurs, car sa miséricorde dure à toujours ! Celui qui donne la nourriture à toute chair, car sa miséricorde dure à toujours ! Louez le Dieu des cieux, car sa miséricorde dure à toujours !</p>

<p>Copyright Caaarnivore - <a href="#haut" title="Retourner en haut de la page">Retour en haut</a></p>
   </body>
</html>



Mais c'est tout.  Pourtant, tout est là... mais vous voudriez aussi pouvoir ordonner le texte, l'aligner à tel endroit, ajouter de la couleur ou des images de fond, que sais-je encore... Ce qui vous manque c'est la mise en page, le design. Ce qui vous manque, c'est le CSS bn_big_smile


           
           
           
           
           
           
       

Une petite ode aux CSS pour se mettre dans l'ambiance.
Par di13774n73

Où écrire du code CSS


Si on reprend notre page XHTML de tout à l'heure sur les plantes Caaarnivores, nous avons 3 manières de lui appliquer du code CSS. Une bonne et deux à n'utiliser qu'en cas d'extrême nécessité. Commençons par ces deux là...
Ajouter du CSS directement dans les balises XHTML

De la même manière que l'on a précédemment utilisé un attribut href pour préciser un lien hypertexte, ou un attribut title pour préciser un titre, on va maintenant se servir de l'attribut style pour appliquer du code CSS à une balise.
Donc si on prend l'exemple d'un paragraphe avec la balise <p> :
Code :
<p style="Mon code CSS">
Je lève mes yeux vers les montagnes... D'où me viendra le secours ? Le secours me vient de l'Éternel, qui a fait les cieux et la terre. Il ne permettra point que ton pied chancelle ; celui qui te garde ne sommeillera point.
</p>


On peut ainsi se servir de l'attribut style dans toutes les balises que l'on a vu précédemment.

Ajouter du CSS au début du fichier XHTML

On peut aussi ajouter du CSS dans le header du fichier XHTML, entre les balises <head></head> à l'aide de la balise <style>. Tout ce qui se situe entre <style> et </style> sera considéré et interprété comme du code CSS.
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" />
       <style type="text/css">
       <!--
       Mon code CSS
       -->

       </style>
   </head>
   <body>
   ...


On met le code CSS entre des balises de commentaires <!-- --> pour éviter que les très vieux navigateurs (qui n'interprètent pas le CSS) n'affichent bêtement le code sur la page sans l'interpréter.

Inconvénients de ces deux méthodes
  • Je vous en ai rapidement parlé dans l'introduction de ce cours d'XHTML/CSS, mais l'intérêt d'utiliser deux langages de programmation est de séparer le contenu de la forme. En travaillant comme cela, si un jour on souhaite modifier la couleur de fond de notre site Internet, on aura juste à modifier la partie forme (le CSS) c'est-à-dire quelques lignes dans une ou deux pages grand maximum, sans s'occuper, ni modifier les 3 600 pages de contenus (le XHTML). Et ça, c'est particulièrement intéressant ! Lorsqu'un site augmente en taille, ce n'est même plus une question de flemmardise, c'est de la survie !

    Je viens de faire un petit calcul : sans compter les pages du forum, la Bnbox compte, à l'heure où j'écris ces lignes, presque 1000 pages. Je vous laisse imaginer si je devais modifier à la main chacune de ces 1000 pages à chaque fois que je souhaite modifier mon design...


    Or ce que nous avons fait dans les méthodes précédentes, c'est justement de mélanger le contenu et la forme. Du coup tout l'avantage d'utiliser deux langages de programmation disparait en fumée !

    Je ne vous l'ai d'ailleurs pas dit, mais on peut mettre en page du texte avec du XHTML. Enfin plutôt avec du HTML. Avant que les CSS ne soient utilisées, on se servait de la balise font et des attributs align, color, ... pour faire le design d'un site Internet. Et on galérait ! Jusqu'à ce que l'on sépare contenu et forme...
  • Un autre avantage du CSS est de pouvoir créer un "patron". Par exemple, on peut écrire du code CSS permettant de mettre en valeur tous les titres de notre site. (avec image de fond, et tout le tralala mini_bn) On peut ensuite appliquer ce "patron" autant de fois que l'on veut dans notre fichier XHTML. Et pourtant on n'aura écrit qu'une seule fois du CSS.

    document/atelier/css.png


    Et la première méthode que je vous ai présenté ne tire pas avantage de ce potentiel énorme des CSS !


Je vous conseille donc de n'utiliser ces deux méthodes qu'en dernier recours ! Cela dit, on s'en sert parfois pour modifier le design d'un site d'une page à une autre à l'aide de PHP, ou d'un autre langage du même acabit.
La bonne méthode : le CSS dans un fichier séparé

La bonne méthode à utiliser est de placer le code CSS dans un fichier à part. Ce fichier aura pour extension .css (tout simplement bn_wink) et contiendra tout le code CSS.
Par exemple :
Code :
@charset "iso-8859-1";
/* Auteurs : Flan, Barth, Blouhibou, BN, Yoshi */
/* Date de création : 30/06/07 */

/* Balises générales */
body {
    margin:0px;
    font-family:Tahoma, Verdana, Arial, sans-serif;
    font-size:0.8em;
}

a {
    color:#4EAC40;
    font-weight:bold;
    text-decoration:none;
}
    a:hover {
        text-decoration:underline;
    }
a img {
    border:0 none;
}
img.email {
    position:relative;
    top:4px;
}


Dans ce chapitre, ne vous inquiétez pas du code CSS en lui-même, comme d'habitude, je vous donne de vrais exemples que vous ne comprenez pas (forcément) pour l'instant, mais qui vous paraîtront plus clairs dans les prochains chapitres.


Pour ma part j'ai pris l'habitude de toujours commencer mes fichiers CSS de la même manière. Ce n'est pas obligatoire, même s'il est conseillé de préciser au moins le jeu de caractères. (voir chapitre 1 pour les jeux de caractères.)

Code :
@charset "iso-8859-15";
/* Auteur : BN */
/* Date de création : 12/01/09 */


Une petite parenthèse mini_bn Il est possible d'ajouter une page CSS dans une autre à l'aide de la commande import des CSS. C'est parfois utile si vos fichiers CSS sont très volumineux et que vous souhaitez les partager en plusieurs petits morceaux.
Code :
@import url(nomDuFichierCSSAImporter.css);

Cela ne fonctionnera pas sur les vieux navigateurs.
Je ferme cette petite parenthèse qui vous servira peut-être un jour.


Maintenant, il ne reste plus qu'à relier nos pages XHTML à notre fichier CSS. Pour cela, on va utiliser la balise <link> dans notre page Web :
Code :
<link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />


On explique ainsi clairement à notre page XHTML quel fichier CSS elle doit suivre. Les attributs de cette balise sont un petit peu différents de d'habitude, mais les seuls qu'il est important de comprendre sont href et title (que vous connaissez déjà) et media (qui permet de préciser pour quel type d'affichage s'applique le fichier CSS : screen pour un affichage à l'écran, print pour l'impression... J'y reviendrai dans un autre chapitre.
Résumons

Résumons. Où peut-on écrire du code CSS ?
  • Dans un fichier à part. On a donc un fichier CSS :
    Code :
    @charset "iso-8859-15";
    /* Auteur : BN */
    /* Date de création : 12/01/09 */

    balise { /* Ceci est un commentaire CSS */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    Et un fichier XHTML dont l'entête contient :
    Code :
    <link rel="stylesheet" type="text/css" media="screen" title="Titre du design" href="nomFichierCSS.css" />
  • Directement dans une balise :
    Code :
    <p style="propriétéCSS: valeur1; propriétéCSS: valeur2;"></p>
  • Directement dans le fichier XHTML :
    Code :
    <style type="text/css">
      <!--
      balise { /* Ceci est un commentaire CSS */
      propriétéCSS: valeur1;
      propriétéCSS: valeur2;
      ...
      }
      -->

    </style>




Et voilà, vous savez désormais où est-ce que vous allez coder votre CSS, même si vous ne savez toujours pas écrire une seule ligne dans ce langage mini_bn Ne vous inquiétez pas, ça ne va pas tarder !

Vos premières lignes en CSS


Appliquer du CSS sur des balises

Bon, depuis le début de ce cours on s'amuse à entourer nos textes avec des balises qui ne servent qu'à l'ordinateur, servons-nous en aussi un petit peu voulez-vous mini_bn
Avec le CSS on va pouvoir modifier le rendu à l'affichage de ce qui se situe entre des balises.
Par exemple pour centrer un paragraphe de texte entouré de la balise <p>, on écrira dans notre fichier CSS :
Code :
p {
text-align: center;
}


Pour rayer une phrase que l'on a préalablement entouré d'un <span> :
Code :
span {
text-decoration: line-through;
}


Ou pour positionner un bloc à droite en se servant de la balise <div> :
Code :
div {
float: right;
border: 1px solid black;
width: 50%;
}


On peut tester ces codes avec le fichier XHTML suivant :
Code :
<p><span>Rayez donc cette phrase</span>, et passons à la suite...</p>
<div>Louez l'Éternel ! Heureux l'homme qui craint l'Éternel, qui trouve un grand plaisir à ses commandements. Sa postérité sera puissante sur la terre, la génération des hommes droits sera bénie.</div>

<p>Il a dans sa maison bien-être et richesse, et sa justice subsiste à jamais. La lumière se lève dans les ténèbres pour les hommes droits, pour celui qui est miséricorDieux, compatissant et juste. Heureux l'homme qui exerce la miséricorde et qui prête.</p>




Bref, pour modifier le design de ce que contient une balise à l'aide du CSS, on utilise la structure suivante :
Code :
balise { /* Ceci est un commentaire */
propriétéCSS: valeur1;
propriétéCSS: valeur2;
...
}


Le point virgule ( ; ) de la dernière propriété n'est pas obligatoire. Cela dit, je vous conseille de le mettre, cela évite bien des erreurs d'inattentions par la suite mini_bn


So far, so good! (Jusqu'ici tout va bien bn_wink)
Seulement, en agissant ainsi, vous allez centrer toutes vos balises <p>, rayer toutes vos balises <span>, et tous vos <div> se positionneront à droite. Et ce n'est pas toujours ce que vous voulez faire. Selon les cas vous allez vouloir appliquer un design sur une seule occurrence d'une balise, sur un petit groupe de balises, ou sur toutes les balises. Et c'est pour cela que l'on va se servir des attributs class et id de l'XHTML.
Appliquer du CSS avec les attributs class et id

On peut donc se servir des attributs class et id pour appliquer un design sur une ou plusieurs balises. Il suffit de connaître la bonne syntaxe.
Si j'ai trois paragraphes et que je souhaite mettre une bordure autour de deux d'entre eux. Je vais utiliser l'attribut class.
Code :
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<p class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</p>


On utilisera alors le code CSS suivant :
Code :
p.entoure {
border: 1px solid black;
}



Le point (.) dans p.entoure permet donc d'appliquer un design sur toutes les balises p ayant pour class "entoure". Le nom donné à la class n'a pas d'importance, cela dit, il ne doit pas contenir d'espace, évitez les caractères accentués de préférence, et, pour la compréhension, il est bon d'utiliser un nom correspondant à l'utilisation que l'on va en faire.
On pourrait aussi ne pas préciser le p dans le fichier CSS et dans ce cas, cela fonctionnerait pour toutes les balises ayant pour class "entoure". Le même exemple modifié :
Code :
<p class="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>


Code :
.entoure {
border: 1px solid black;
}



Il est aussi possible de préciser deux class dans un seul attribut class, il suffit de les séparer par des espaces.
Code :
<p class="entoure align">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>
<div class="entoure">Car ce n'est point par leur épée qu'ils se sont emparés du pays, ce n'est point leur bras qui les a sauvés ; mais c'est ta droite, c'est ton bras, c'est la lumière de ta face, parce que tu les aimais.</div>


Code :
.entoure {
border: 1px solid black;
}
.align {
text-align: center;
}



On peut agir de la même manière en utilisant l'attribut id et en remplaçant le point (.) par un dièse (#). A noter que la valeur d'un id ne peut commencer par un chiffre.
Code :
<p id="entoure">O Dieu ! nous avons entendu de nos oreilles, nos pères nous ont raconté Les oeuvres que tu as accomplies de leur temps, aux jours d'autrefois.</p>
<p>De ta main tu as chassé des nations pour les établir, tu as frappé des peuples pour les étendre.</p>


On utilisera alors le code CSS suivant :
Code :
p#entoure { /* Ou #entoure directement */
border: 1px solid black;
}




Il existe cela dit une différence notable entre class et id ! Un id est unique, deux balises d'une même page ne pourront donc pas avoir le même attribut id. Par contre, une même class peut être commune à autant de balises que l'on veut.
Par conséquent, on utilisera en général id pour séparer les grandes parties d'une page (par exemple : header, corps, menu, footer) et class pour le reste.
Résumons

Résumons les différentes manières d'appliquer du code CSS à une page Web.
  • Directement sur les balises :
    Code :
    balise { /* Ceci est un commentaire */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }
  • En utilisant l'attribut id :
    Code :
    balise#id { /* Ou #id directement */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    L'attribut id est unique.
    La valeur de l'id ne peut commencer par un chiffre et ne doit pas contenir d'espace. De manière générale, évitez les caractères accentués.
    Rappelons qu'id permet aussi d'utiliser des ancres. (voir le chapitre 3)
  • En utilisant l'attribut class :
    Code :
    balise.class { /* Ou .class directement */
    propriétéCSS: valeur1;
    propriétéCSS: valeur2;
    ...
    }

    La valeur de la class ne doit pas contenir d'espace, et de manière générale, évitez les caractères accentués.
    Il est possible de préciser plusieurs class pour une même balise dans le XHTML : class=\"class1 class2 class3 ...\".


Et voilà, vous venez enfin de découvrir ce qu'était le CSS. Bientôt vous n'allez plus pouvoir vous en passer mini_bn A partir de maintenant tout va aller très vite, on va faire plusieurs chapitres en ne s'intéressant qu'au CSS et seulement après je vous apprendrai de nouvelles choses en XHTML !

Quand je dit : tout va aller très vite, je ne parlais pas de l'écriture des prochains chapitres hein bn_heureux ça, ça reste comme avant bn_tongue





Remonter Navigation rapide : Sommaire

Mettons du texte en forme (1ère partie)

Vous avez eu un aperçu des capacités des CSS dans le chapitre précédent. J'espère que cela vous a donné envi d'en savoir plus ! En tout cas, à partir de maintenant, on va s'attaquer à l'apprentissage des différentes propriétés du CSS, en commençant par celles permettant de mettre en forme du texte. Alignement, graisse, italique : à l'assaut bn_big_smile


Un des bons points pour l'apprentissage des propriétés CSS, c'est que l'on peut facilement les classer par famille. Par exemple, pour les propriétés de mises en forme du texte, on peut distinguer celles qui ont le préfixe text-, de celles qui ont le préfixe font-, ou de celles qui n'ont aucun préfixe en particulier. (éh, ce serait trop facile sinon bn_heureux) Je vais donc me servir de ce classement naturel pour vous expliquer les différentes propriétés de mises en forme.
Encore une chose, les propriétés que j'explique au début de chaque partie sont en générales plus utiles et intéressantes que celles détaillées en fin de partie.

Font- et ses potes


Certaines propriétés CSS commencent donc par le préfixe font-. Elles vont agir directement sur le texte afin d'en modifier sa forme.
Modifier la taille du texte

Il est possible de modifier la taille du texte en précisant une valeur à la propriété font-size (1em par défaut). Cette valeur peut être exprimée en pixel (px), en pourcentage (%), en em (em), ou à l'aide d'un mot clef pré-configuré.
Bon la comme ça, je pense que cela ne vous dit pas grand chose, alors laissez-moi vous expliquer.
  • En pixel : cela correspond à la taille en hauteur d'une lettre, donc cette valeur est assez similaire à celle que vous pouvez utiliser sous votre traitement de texte favori. Par exemple : font-size: 18px; vous donnera un texte ayant à peu près la même taille qu'un texte en taille 18 sous un traitement de texte.
    Cette valeur est fixe, 18 pixels, c'est 18 pixels. Si un utilisateur souhaite agrandir la taille du texte sur une page Web (parce qu'il a des problèmes de vue par exemple) grâce au zoom que possède son navigateur : il ne peut pas, le texte fera toujours 18 pixels. Donc utiliser une taille en pixel c'est pratique (on sait exactement la taille du texte), mais ce n'est pas l'idéal pour l'utilisateur. (il ne peut adapter la taille du texte comme il le souhaite)
    Un exemple d'utilisation :
    Code :

    .pixel1 {
    font-size: 18px;
    }
    .pixel2 {
    font-size: 30px;
    }

    Petit rappel du chapitre précédent : tout le texte contenu dans les balises utilisant la classe "pixel1" (ex : <p class=\"pixel1\">Texte</p>) auront une taille de 18px.

  • En pourcentage : cette unité permet de définir la taille du texte par rapport à la taille normale qui correspond à 100%. Une valeur supérieure à 100 agrandie le texte, une valeur inférieure à 100 le rétrécit. ça semble assez instinctif. Et cette fois-ci, l'utilisateur peut modifier (en zoomant ou dézoomant) la taille du texte selon sa convenance.
    Code :

    .pourcentage1 {
    font-size: 100%;
    }
    .pourcentage2 {
    font-size: 130%;
    }
    .pourcentage3 {
    font-size: 75%;
    }
  • En em : cette unité est en fait la même que le pourcentage, à un facteur multiplicateur près. Elle permet de définir la taille du texte par rapport à la taille normale qui correspond à 1em. Une valeur supérieure à 1 agrandie le texte, une valeur inférieure à 1 le rétrécit. Entre em et pourcentage, c'est une question de goût.
    Code :

    .em1 {
    font-size: 1em;
    }
    .em2 {
    font-size: 1.3em;
    }
    .em3 {
    font-size: 0.6em;
    }
  • Avec un mot clef : certains mots clefs ont déjà été configuré pour pouvoir modifier "facilement" la taille : xx-small pour que le texte soit très petit, puis x-small, small, medium c'est la taille normale, large, x-large, xx-large. ça vaut ce que ça vaut bn_heureux
    Code :

    .mini {
    font-size: xx-small;
    }
    .trespetit {
    font-size: x-small;
    }
    .petit {
    font-size: small;
    }
    .normal {
    font-size: medium;
    }
    .grand {
    font-size: large;
    }
    .tresgrand {
    font-size: x-large;
    }
    .trestresgrand {
    font-size: xx-large;
    }


La différence entre taille relative (pourcentage et em), et taille fixe (pixel) est de moins en moins primordiale, en effet tous les navigateurs récents possèdent un zoom qui zoome aussi sur le texte fixe, les images, etc... Donc, dans un futur relativement proche, le pixel pour le texte sera peut-être plus conseillé que l'em ou le pourcentage. Mais pour l'instant, ce n'est pas le cas.


Pour voir ce que donne tous nos exemples, utilisons le code XHTML suivant :
Code :

<h2>Aucun style appliqué</h2>
<p>Garde-moi, ô Dieu ! car je cherche en toi mon refuge.</p>

<h2>En pixel</h2>
<p class="pixel1">18pxJe dis à l'Éternel : tu es mon Seigneur, tu es mon souverain bien !</p>
<p class="pixel2">30pxLes saints qui sont dans le pays, les hommes pieux sont l'objet de toute mon affection.</p>

<h2>En pourcentage</h2>
<p class="pourcentage1">100%On multiplie les idoles, on court après les Dieux étrangers : je ne répands pas leurs libations de sang, je ne mets pas leurs noms sur mes lèvres.</p>
<p class="pourcentage2">130%L'Éternel est mon partage et mon calice ; c'est toi qui m'assures mon lot ; un héritage délicieux m'est échu, une belle possession m'est accordée.</p>
<p class="pourcentage3">75%Je bénis l'Éternel, mon conseiller ; la nuit même mon coeur m'exhorte.</p>

<h2>En EM</h2>
<p class="em1">1emJ'ai constamment l'Éternel sous mes yeux ; quand il est à ma droite, je ne chancelle pas.</p>
<p class="em2">1.3emAussi mon coeur est dans la joie, mon esprit dans l'allégresse, et mon corps repose en sécurité.</p>
<p class="em3">0.6emCar tu ne livreras pas mon âme au séjour des morts, tu ne permettras pas que ton bien-aimé voie la corruption.</p>

<h2>Par mot-clef</h2>
<p class="mini">xx-smallTu me feras connaître le sentier de la vie ; il y a d'abondantes joies devant ta face, des délices éternelles à ta droite.</p>
<p class="trespetit">x-smallSi l'Éternel ne bâtit la maison, ceux qui la bâtissent travaillent en vain ; si l'Éternel ne garde la ville, celui qui la garde veille en vain.</p>
<p class="petit">smallEn vain vous levez-vous matin, vous couchez-vous tard, et mangez-vous le pain de douleur ; il en donne autant à ses bien-aimés pendant leur sommeil.</p>
<p class="normal">mediumVoici, des fils sont un héritage de l'Éternel, le fruit des entrailles est une récompense.</p>
<p class="grand">x-largeComme les flèches dans la main d'un guerrier, ainsi sont les fils de la jeunesse.</p>
<p class="tresgrand">xx-largeHeureux l'homme qui en a rempli son carquois ! Ils ne seront pas confus, quand ils parleront avec des ennemis à la porte.</p>




Mettre en gras ou en italique

Comme sur tout traitement de texte classique, il est possible de modifier la graisse (mettre en gras quoi), ou l'inclinaison (mettre en italique) avec font-weight (normal par défaut), font-style (normal par défaut). Voyons plus en détails ces 2 propriétés :
  • font-weight : modifie la graisse du texte.
    normal : pas de graisse
    bold : texte en gras
    bolder : texte plus en gras que la normale
    lighter : texte moins en gras que la normale
    valeur entre 100 et 900 par pas de 100 : en théorie 100 signifie peu de graisse, 900 signifie beaucoup. En pratique de 100 à 400 le texte est normal, de 500 à 900, il est en gras.

    Regardons un exemple :
    Code :

    .gras {
    font-weight: bold;
    }
    .gras2 {
    font-weight: bolder;
    }
    .gras3 {
    font-weight: lighter;
    }
    .graschiffre {
    font-weight: 300;
    }


    Ne vous souciez pas trop du bolder, lighter pour l'instant. On reverra cela lorsqu'on parlera d'héritage.

  • font-style : modifie l'inclinaison du texte.
    normal : inclinaison... normale
    italic : texte en italique
    oblique : texte en oblique
    En typographie, pour une police donnée (Arial par exemple), il existe une "sous-police" oblique et une "sous-police" italique. Le navigateur va donc choisir la police demandée, et, s'il arrivait que la "sous-police" italique n'existe pas, il va utiliser la "sous-police" oblique par défaut.
    Si j'ai bien compris les polices obliques sont créées en inclinant à l'aide d'un algorithme les polices d'origines, alors que les polices italiques sont conçues pour être en italique par le créateur des polices.

    Regardons un exemple :
    Code :

    .italique {
    font-style: italic;
    }
    .oblique {
    font-style: oblique;
    }


Choisir la police du texte

Ah ! la police d'écriture du texte, voilà un grand sujet. En effet, la propriété font-family permet d'utiliser n'importe quel police de caractères sur un texte ! Mais pour que cette police soit réellement visible, il faut que l'utilisateur la possède sur son ordinateur... Et malheureusement, très peu de personne possèdent la magnifique police Winnie ou Starwars que vous rêvez déjà d'afficher sur vos pages.
Voilà pourquoi le W3C a fixé une liste des polices d'écritures que l'on peut utiliser sans trop d'inquiétude, et voilà aussi pourquoi on précise toujours plusieurs polices possibles dans la propriété font-familiy. Si la première police précisée existe, elle sera utilisée, sinon ce sera la deuxième, etc...

Voici la liste de ces polices d'écritures dites standards : Arial, , Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana. La police par défaut est appelée : serif. Il faut toujours la préciser à la fin de font-family. En théorie, c'est un petit peu plus tordu que ça (voyez vous-même dans cet article sur les polices du W3C), mais dans la vraie vie c'est celles dont on se sert.

Voyons un petit exemple :
Code :

.ex1 {
font-family: Arial,  Verdana, "Times New Roman", serif;
}
.ex2 {
font-family: Trebuchet, Georgia, Arial, serif;
}



Comme vous pouvez le voir, lorsqu'une police a un nom composé de plusieurs mots, on l'écrit entre guillemets doubles.
Pour ma part j'apprécie particulièrement la police Verdana. Et j'utilise aussi souvent Tahoma (qui ressemble à Verdana) que l'on retrouve fréquemment sur les machines tournant sous Windows. Mais bien sûr, le choix de la police à utiliser dépend généralement du design de notre page, ou du format d'affichage. (pour impression, pour affichage via vidéo-projecteur, ...)

De manière générale, on précise la police principale d'une page dans le body, et on modifie cette police si besoin au cas par cas dans chaque balise. On verra pourquoi cela fonctionne lorsqu'on parlera d'héritage.

Code :

body {
font-family: Arial, Verdana, serif;
}
span {
font-family: Trebuchet, Georgia, Arial, serif;
}


Il existe quelques méthodes pour utiliser une police d'écriture que l'utilisateur ne possède pas, en la lui faisant télécharger sur la Toile automatiquement. C'est notamment possible, en théorie, grâce à @font-face. J'ai lu que cela ne fonctionnait pas à tous les coups, mais si cela vous intéresse, je vous laisse vous documenter, en commençant par le W3C

Agir sur la casse

Alors celle-la, je l'aime beaucoup ! font-variant permet d'agir sur la casse du texte (majuscule, minuscule) dans une certaine mesure (c'est text-transform qui se chargera du reste) en permettant de mettre un texte en petites majuscules : laisse la première lettre de la chaine de caractères en majuscule si elle l'était, change la casse des autres lettres en majuscules plus petites. Voyez vous-même :
Code :

p {
font-variant: small-caps;
}



Cela peut donner un effet très sympa pour des titres par exemple.

Text- et ses copains


Plusieurs propriétés de mise en forme du texte commencent donc par le préfixe text-. A une exception près, ces propriétés ne vont pas transformer le texte lui-même, mais agir autour de lui.
Aligner du texte

Comme dans un traitement de texte classique, on peut centrer du texte, l'aligner à droite, à gauche ou le justifier avec le CSS. Pour cela, on utilise la propriété text-align (left par défaut en général) avec les valeurs au choix : center, left, right, justify.

Mettons cela en pratique dans un exemple.
D'abord le code CSS :
Code :
p.centrer {
text-align: center;
}
p.gauche {
text-align: left;
}
p.droite {
text-align: right;
}
p.justifier {
text-align: justify;
}


Puis le code de la page HTML :
Code :
<h2>Aucun style appliqué</h2>
<p>Louez l'Éternel ! Louez Dieu dans son sanctuaire ! Louez-le dans l'étendue, où éclate sa puissance !</p>

<h2>Texte aligné</h2>
<p class="gauche">Aligné à gaucheRends-moi justice, Éternel ! car je marche dans l'intégrité, je me confie en l'Éternel, je ne chancelle pas. Sonde-moi, Éternel ! éprouve-moi, fais passer au creuset mes reins et mon coeur ; car ta grâce est devant mes yeux, et je marche dans ta vérité. Je ne m'assieds pas avec les hommes faux, je ne vais pas avec les gens dissimulés ; je hais l'assemblée de ceux qui font le mal, je ne m'assieds pas avec les méchants. Je lave mes mains dans l'innocence, et je vais autour de ton autel, ô Éternel ! Pour éclater en actions de grâces, et raconter toutes tes merveilles. Éternel ! j'aime le séjour de ta maison, le lieu où ta gloire habite. N'enlève pas mon âme avec les pécheurs, ma vie avec les hommes de sang, dont les mains sont criminelles Et la droite pleine de présents ! Moi,  je marche dans l'intégrité ; délivre-moi et aie pitié de moi ! Mon pied est ferme dans la droiture : je bénirai l'Éternel dans les assemblées.</p>
<p class="droite">Aligné à droiteDieu est connu en Juda, son nom est grand en Israël. Sa tente est à Salem, et sa demeure à Sion. C'est là qu'il a brisé les flèches, le bouclier, l'épée et les armes de guerre. Tu es plus majestueux, plus puissant Que les montagnes des ravisseurs. Ils ont été dépouillés, ces héros pleins de courage, ils se sont endormis de leur dernier sommeil ; ils n'ont pas su se défendre, tous ces vaillants hommes. A ta menace, dieu de Jacob ! Ils se sont endormis, cavaliers et chevaux. Tu es redoutable,  ô toi ! Qui peut te résister,  quand ta colère éclate ? Du haut des cieux tu as proclamé la sentence ; la terre effrayée s'est tenue tranquille, lorsque Dieu s'est levé pour faire justice, pour sauver tous les malheureux de la terre. L'homme te célèbre même dans sa fureur, quand tu te revêts de tout ton courroux. Faites des voeux à l'Éternel, votre Dieu,  et accomplissez-les ! Que tous ceux qui l'environnent apportent des dons au Dieu terrible ! Il abat l'orgueil des princes, il est redoutable aux rois de la terre.</p>
<p class="justifier">JustifiéO Dieu ! tu nous as repoussés, dispersés,  tu t'es irrité : relève-nous ! Tu as ébranlé la terre, tu l'as déchirée : répare ses brèches, car elle chancelle ! Tu as fait voir à ton peuple des choses dures, tu nous as abreuvés d'un vin d'étourdissement. Tu as donné à ceux qui te craignent une bannière, pour qu'elle s'élève à cause de la vérité. Afin que tes bien-aimés soient délivrés, sauve par ta droite, et exauce-nous ! Dieu a dit dans sa sainteté : je triompherai, je partagerai Sichem, je mesurerai la vallée de Succoth ; a moi Galaad, à moi Manassé ; Éphraïm est le rempart de ma tête, et Juda, mon sceptre ; moab est le bassin où je me lave ; je jette mon soulier sur Édom ; pays des Philistins, pousse à mon sujet des cris de joie ! Qui me mènera dans la ville forte ? Qui me conduira à Édom ? N'est-ce pas toi,  ô Dieu, qui nous as repoussés, et qui ne sortais plus, ô Dieu, avec nos armées ? Donne-nous du secours contre la détresse ! Le secours de l'homme n'est que vanité. Avec Dieu, nous ferons des exploits ; il écrasera nos ennemis.</p>
<p class="centrer">Centré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 !</p>



On peut donc très facilement aligner horizontalement du texte avec du CSS. On verra dans un autre chapitre que l'on peut aussi l'aligner verticalement, au moins en théorie.
Indenter du texte

Il est possible de décaler la première ligne d'un texte par rapport aux autres afin de créer un alinéa grâce à text-indent (0 par défaut). Il suffit de préciser une valeur positive ou négative.

Code :

.ex1 {
text-indent: 2em;
}
.ex2 {
text-indent: 20px;
}
.ex3 {
text-indent: 10%;
}
.ex4 {
text-indent: -40px;
}




Le dernier cas nous permet de voir que l'on peut faire complètement disparaître le texte d'une page avec un text-indent: -9999px; par exemple.

Souligner, surligner, barrer, faire clignoter du texte

Il est possible de "décorer" rapidement du texte de plusieurs manière avec text-decoration (none par défaut). On s'en sert surtout pour modifier l'apparence d'un lien (au passage d'une souris, au clic...)

Code :
.souligne {
text-decoration: underline;
}
.surligne {
text-decoration: overline;
}
.barre {
text-decoration: line-through;
}
.clignotant {
text-decoration: blink;
}




Il est à noter que la valeur blink ne fonctionne pas sur tous les navigateurs.
Agir sur la casse du texte

Voici l'exception ! La propriété text-transform (none par défaut) permet d'agir directement sur le texte puisqu'elle s'occupe d'en gérer la casse. (majuscule, minuscule, première lettre en majuscule) Un petit exemple vaut mieux qu'une explication.

Code :
.majuscule {
text-transform: uppercase;
}
.minuscule {
text-transform: lowercase;
}
.first_majuscule {
text-transform: capitalize;
}






Et voilà pour la bande à text- ! Quelques autres propriétés en font encore partie (text-shadow, text-replace, ...) mais soit elles ne fonctionnent pas correctement, soit elles ne font pas partie du CSS 2, mais du CSS 3. Le CSS3 est de plus en plus utilisé, c'est pour bientôt et on risque d'en reparler !

C'en est finit de la première partie de l'apprentissage de mise en forme du texte ! Dans le prochain chapitre nous verrons quelques autres propriétés importantes de mise en forme, notamment la coloration du texte, et l'alignement horizontal. Mais ce sera beaucoup plus léger que ce chapitre, il faut vous ménager un peu bn_wink




Remonter Navigation rapide : Sommaire

Conférence XHTML/CSS

Durant ma scolarité à l'ENSIIE, j'ai eu l'occasion de faire une conférence sur l'XHTML/CSS afin d'expliquer aux 1A (les élèves de première année) de mon école comment réaliser un jolie site Web comme il faut mini_bn L'idée était de réaliser le design d'un blog en un peu plus de 1h30.
Donc, si vous souhaitez savoir ce qu'il est possible de réaliser en 1h30 avec quelques connaissances dans les langages du Web, c'est l'occasion. D'autant plus que la structure XHTML et le design CSS, sans être parfaits, forment une bonne base de presque tout ce qu'il est indispensable de savoir dans ces 2 langages. Et comme je ne pouvais pas m'en empêcher, j'ai préparé le terrain pour un apprentissage futur du HTML5 et j'ai donnée quelques tuyaux CSS3 (peut-être même un peu plus bn_heureux).

/document/atelier/mixxhtml.png



Si vous avez des remarques, ou des questions, n'hésitez pas bn_big_smile


Remonter Navigation rapide : Sommaire
Ce cours est en train d'être rédigé. Il va donc vous falloir patienter un peu pour avoir la suite bn_heureux
En attendant, pour toutes questions ou tous problèmes : Bar à Nougat ! (forum de la Bnbox)
  • Auteur : Bnmaster
  • Créé le : 27/03/2006
  • Modifié le : 22/05/2008

Ailleurs sur la Bnbox

Ailleurs sur la Toile

Mini-tchat

?

hkhoiyhyuohouygkuygkuygkuyg dit : Vuygygiygiuyguiygiuygiuyguiygiuygiuygiuyguygiuyg Le 23 mars, 18h38 via Résumé : L'Avare

hihan tergiverse : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan déclare : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan tergiverse : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan scribouille : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan griffonne : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan griffonne : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan chuchote : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan déclare : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan écrit : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan tergiverse : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan déclare : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan murmure : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan griffonne : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan griffonne : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan dit : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan écrit : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan s'exclame : A Le 23 mars, 15h01 via Les avantages et les risque...

hihan bafouille : Asdasdasdasdasdasdasd Le 23 mars, 15h00 via Les avantages et les risque...

5 griffonne : Patate Le 23 mars, 15h00 via Les avantages et les risque...

5 déclare : Yo Le 23 mars, 15h00 via Les avantages et les risque...

Mike déclare : Which wholesale Jack Youngblood jerseys do you ever buy?
Now this one site for sale: really cheap nba jerseys
Le 23 mars, 0h53

Aracelis dit : I have been reviewin online more than two hours today for http://cheapcalgarypaintings.blogspot.com & Bar Nougat, yet I never found any interesting article like yours.
It is pretty worth enough for me. In my opinion, if all site owners and bloggers made good content as
you did, the net will be a lot more useful than ever
before.
Le 22 mars, 21h48

valouuuuu proclame : OUAIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIItop!!!!! Le 22 mars, 21h42 via Résumé - Le Médecin Malgrè ...

nénette gribouille : Médecin malgré lui résumé bien!!!!!!
oreijas goate!!!!!
Le 22 mars, 21h41 via Résumé - Le Médecin Malgrè ...

ta mere déclare : Salut Le 22 mars, 16h39 via Résumé : Andromaque

bebou griffonne : Trop bien le site Le 22 mars, 15h52 via Résumé - Les Fourberies De ...

Tracey écrit : Great place to order fans cheap jerseys by Paypal.
More
Le 22 mars, 9h07

Le copié qui est collé griffonne : Quel école vous? Le 20 mars, 18h00 via Résumé - Les Fourberies De ...

Le copié qui est collé gribouille : Voila tout bn_wink Le 20 mars, 17h59 via Résumé - Les Fourberies De ...

arnaud du 24 scribouille : Trop frais Le 20 mars, 15h31 via Résumé scène par scène - Le...

fff chuchote : 4wt Le 20 mars, 2h27 via Résumé : Andromaque

fff scribouille : W4t Le 20 mars, 2h27 via Résumé : Andromaque

fff tergiverse : Ag Le 20 mars, 2h27 via Résumé : Andromaque

fff déclame : Sga Le 20 mars, 2h27 via Résumé : Andromaque

fff chuchote : Ji Le 20 mars, 2h27 via Résumé : Andromaque

fff gribouille : Ji Le 20 mars, 2h27 via Résumé : Andromaque

fff proclame : Hi Le 20 mars, 2h27 via Résumé : Andromaque

REnnes s'exclame : Blowjob Le 20 mars, 2h17 via Résumé : Andromaque

Aziz griffonne : Test Le 19 mars, 20h37 via Résumé : Le Tartuffe de Mol...

phbu^po murmure : Iupiojùi^p`k$o^àmce Le 18 mars, 10h42 via Résumé scène par scène - Le...

phbu^po murmure : Tuioippi^$ Le 18 mars, 10h42 via Résumé scène par scène - Le...

glires ger tergiverse : III+IV=VII Le 17 mars, 0h31 via Résumé : L'Avare

mini-tchat lol 14 bafouille : Kikou merci beaucoup pour les résumés ca m'as beaucoup aidé Le 16 mars, 20h40 via Résumé : L'Avare

anonyme dit : Dans l'acte 2 scène 5"Il discute, mais finalement, pas de réponse."ils prend un s et discute s'écrit avec ent a la fin " discutent" Le 16 mars, 19h15 via Résumé : On ne badine pas a...

anonyme s'exclame : Dans l'acte 3 scène 2" Maître Blazius essai d'intercepter une lettre de Camille, mais Perdican arrive, il lui prend la LETRE, la lit et en est tout attristé." letre prend 2 t " Lettre" Le 16 mars, 19h04 via Résumé : On ne badine pas a...

la ereture proclame : Pk le livre Les brigands de saint-michel ni sont pas??? Le 16 mars, 7h25 via Recherche

12324 dit : Pourquoi sa finit comme sa ?? Le 15 mars, 21h19 via Résumé : Andromaque

12324 murmure : !!! Le 15 mars, 21h18 via Résumé : Andromaque

12324 bafouille : ... Le 15 mars, 21h18 via Résumé : Andromaque

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