La Bnbox !

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
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 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 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 ) 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

Préparatifs préliminaires

• Aucun commentaire

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)



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 :
Une image :
Code :

Le seul hic dans tout ça c'est que le langage XHTML est un chouille plus compliqué ! (bah sinon j'aurais rien à vous apprendre ) 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é

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 ) 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 !

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 :


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.



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 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 )

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



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 )
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 ) 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.

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 )

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 )

• Auteur : Bnmaster
• Aucun commentaire

Une première page en XHTML

• Aucun commentaire

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 ?
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 :


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 :


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

Un petit récapitulatif en image :

Il ne vous reste plus qu'à ouvrir votre document sous votre navigateur (Fichier/Ouvrir un fichier ou ctrl+O) pour voir le résultat
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 ?



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 ) 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 :

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 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 :

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 ) 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 (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)
    
    
    
    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

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 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 :


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 :


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.


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


Cette balise indique au navigateur va à la ligne !. Vous en aurez souvent besoin.
Cela nous donne donc :
Code :


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 :


Alors là, logiquement si vous avez bien suivi ce que j'ai dit avant, vous devriez dire :

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

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

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 )

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 !

• Auteur : Bnmaster
• Aucun commentaire

La sémantique du XHTML

• Aucun commentaire

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

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

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 ) 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

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 )
• 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>
  
  
  Voir le résultat

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. (d'où le "en ligne" )
• 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 )

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 !



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

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.

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 :




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 :

Oui, je sais, ce n'est pas magnifique, mais bon... ça fera l'affaire

• 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é 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>

• 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>.
  
  
  Voir le résultat
  
  

• 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>

  
  
  Voir le résultat
  
  
  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>
  
  
  Voir le résultat

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
• 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 :

j'utiliserai donc le code suivant :
Code :
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 ) 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 : 4² = 16 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
• <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 )
  
  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 ) semble vouloir supprimer <acronym>. Mais enfin, rien n'est moins sûre

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 :
En effet, on a vu qu'il existe la balise <strong> qui permet justement de mettre en valeur les textes important


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

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
Voici un petit exemple :
Code :


Inutile de dire que le premier qui me fait quelque chose du style :
Code :
je l'étripe comme il se doit 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

• <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 ) 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>
  
  
  Voir le résultat
• <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 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

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 :
En effet, on a vu qu'il existe la balise <blockquote> qui permet d'afficher une citation




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 ) 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 (enfin )
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 !

• Auteur : Bnmaster
• Aucun commentaire

A l'abordage des CSS

• Aucun commentaire

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 :

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

Code :


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

Code :


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

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 :

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 :

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 ) 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.
  
  
  
  
  
  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 ) et contiendra tout le code CSS.
Par exemple :
Code :



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 :



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 :

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 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
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 :

Pour rayer une phrase que l'on a préalablement entouré d'un <span> :
Code :

Ou pour positionner un bloc à droite en se servant de la balise <div> :
Code :

On peut tester ces codes avec le fichier XHTML suivant :
Code :



Bref, pour modifier le design de ce que contient une balise à l'aide du CSS, on utilise la structure suivante :
Code :



So far, so good! (Jusqu'ici tout va bien )
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 :

On utilisera alors le code CSS suivant :
Code :


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 :

Code :


Il est aussi possible de préciser deux class dans un seul attribut class, il suffit de les séparer par des espaces.
Code :

Code :


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 :

On utilisera alors le code CSS suivant :
Code :



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

• Auteur : Bnmaster
• Aucun commentaire

Mettons du texte en forme (1ère partie)

• Aucun commentaire

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


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 ) 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
  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;
}


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

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;
}

  
  
  Essayer : texte en gras
  
  
  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;
}

  
  
  Essayer

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 :


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 :

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 :


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 :

Puis le code de la page HTML :
Code :


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 :

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 :



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 :





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

• Auteur : Bnmaster
• Aucun commentaire

Conférence XHTML/CSS

• Aucun commentaire

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 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 ).

• Pour voir la démo du résultat obtenu : Démo site XHTML/CSS
• Pour télécharger la démo : Télécharger site XHTML/CSS

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

• Auteur : Bnmaster
• Aucun commentaire

Ce cours est en train d'être rédigé. Il va donc vous falloir patienter un peu pour avoir la suite
En attendant, pour toutes questions ou tous problèmes : Bar à Nougat ! (forum de la Bnbox)