Les Paragraphes
Les Titres
Importance
Rareté
Les Liens
Lien Page
Les Ancres
Les Images
Insérer Image

Organiser son texte

Bon, la page blanche c'est bien joli, mais votre site web risque d'avoir un succès mitigé si vous le laissez comme ça.

La première étape pour "remplir" votre site, c'est d'écrire du texte dedans... lui donner du contenu quoi. Nous allons voir qu'écrire du texte est très simple, mais il faut séparer les différents types de texte.
En effet, nous allons voir successivement dans ce chapitre :

Comment rédiger des paragraphes
La façon dont fonctionnent les titres
Comment donner de l'importance à certains mots de son texte
Et enfin, nous verrons quelques balises un peu plus "rarement" utilisées, mais que vous devez connaître au cas où vous en ayez besoin un jour.

Les paragraphes

Vous avez donc envie d'écrire du texte dans votre page web, mais vous ne savez pas comment procéder ?
En XHTML, les choses sont plutôt simples : ça fonctionne en paragraphes. Chaque paragraphe se trouve entre les balises <p> et </p> (qui signifient "paragraphe").
Regardez ce bout de code, c'est un petit paragraphe écrit en XHTML :

<p>Bonjour et bienvenue sur mon site ! Ceci est mon premier test, alors soyez indulgents s'il vous plaît, j'apprends petit à petit comment ça marche. Pour l'instant c'est un peu vide, mais revenez dans 2-3 jours quand j'aurai appris un peu plus de choses, je vous assure que vous allez être surpris !</p>

<p> signifie "Début du paragraphe"
</p> signifie "Fin du paragraphe"

Comme je vous l'ai dit dans le chapitre précédent, on écrit le contenu de notre site web entre les balises <body></body>
Il nous suffit donc de mettre notre paragraphe entre ces deux balises, et nous aurons enfin notre première page web avec du texte !

Je reprends donc exactement le même code que dans le chapitre précédent, et j'y ajoute mon paragraphe :

Mais ne nous arrêtons pas en si bon chemin. Nous allons voir maintenant un truc particulier en XHTML : comment sauter des lignes. Ca a l'air simple, mais pourtant ça ne fonctionne pas vraiment comme dans un traitement de texte habituel...

Sauter une ligne

En XHTML, si vous appuyez sur la touche "Entrée", ça ne va pas créer une nouvelle ligne comme vous avez l'habitude. Essayez donc ce code :

Eh oui, c'est pareil que tout à l'heure ! Rien n'a changé !

Mais, comme vous devez vous en douter, il y a bien un moyen de faire. En tout cas comme vous pouvez le voir, taper frénétiquement sur la touche "Entrée" ne sert strictement à rien.

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p>.
Votre code XHTML devrait donc être au final plein de balises de paragraphe !

Un exemple :

Oui, mais si je veux juste aller à la ligne dans un paragraphe, et non pas sauter une ligne ?
Devinez quoi : il existe une balise "Aller à la ligne" !
C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne : <br />.
Vous devez obligatoirement la mettre à l'intérieur d'un paragraphe, donc je ne veux pas voir de <br /> à l'extérieur des balises <p></p>.
Voici (enfin) le code source qui va donner la présentation qu'on voulait :

Vous pouvez théoriquement mettre plusieurs balises <br /> d'affilée pour faire plusieurs sauts de lignes, mais normalement vous n'aurez pas besoin de le faire quand vous connaîtrez le CSS.
Donc c'est compris ?

<p> </p> : pour organiser son texte en paragraphes.
<br /> : pour aller à la ligne.

Maintenant qu'on sait écrire des paragraphes, voyons voir comment on crée des titres

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Les Images ~ Insérer Image

Les titres

Rédiger du texte c'est bien, mais donner un titre à votre texte c'est encore mieux.
En XHTML on est vernis, on a le droit d'utiliser 6 niveaux de titres différents.
Je veux dire par là qu'on peut dire "Ceci est un titre très important", "Ceci est un titre un peu moins important", "Ceci est un titre encore moins important" etc...On a donc 6 balises de titre différentes que l'on peut utiliser :

<h1></h1>: signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.
<h2></h2>: signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.
<h3></h3>: pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez)
<h4></h4>: titre encore moins important.
<h5></h5>: titre pas important.
<h6></h6>: titre vraiment pas important du tout.

Attention : ne confondez pas avec la balise <title> ! La balise <title> affiche le titre de la page dans la barre de titre du navigateur comme nous l'avons vu.

Les titres <h1> et compagnie eux, servent à créer des titres qui seront affichés dans la page web.
Ne vous laissez pas impressionner parce qu'il y a le choix entre plein de balises. Dans la pratique, moi j'utilise les balises <h1>, <h2> et <h3>, et très rarement les autres (je n'ai pas souvent besoin de 6 niveaux de titres différents).Votre navigateur affiche le titre très important en très gros, le titre un peu moins important en un peu moins gros etc...Essayez de faire une page web avec des titres pour voir ce que ça donne :

Allez, je vous donne un exemple d'utilisation des titres dans une page web (vous allez voir que je ne me sers pas de toutes les balises) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Page d'essai</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Bienvenue sur le Site!</h1>
<p>Bonjour et bienvenue sur mon site.<br />Le Site, qu'est-ce que c'est ?</p>
<h2>Des cours pour débutants</h2>
<p>Le Site vous propose un cours destinés aux débutants :<br />aucune connaissance n'est requise pour lire ces cours !</p>
<p>Vous pourrez ainsi apprendre, sans rien y connaître auparavant, à créer un site web, construire des cartes en 3D avec le logiciel Hammer etc...</p>
<h3>Une communauté active</h3>
<p>Vous avez un problème, un élément du cours que vous ne comprenez pas ? Vous avez besoin d'aide pour créer votre site ?<br />
Rendez-vous sur les forums ! Vous y découvrirez que vous n'êtes pas le seul dans ce cas, et vous trouverez très certainement quelqu'un qui vous aidera aimablement à résoudre votre problème.
</p>
</body>
</html>

Et voilà, vous avez votre première vraie page web !

Oui mais moi je veux centrer mon titre, l'écrire en rouge et le souligner !

Nous ferons tout cela lorsque nous apprendrons le CSS. Ce qui est très important, c'est de retenir que <h1> ne signifie pas "Times New Roman, taille 16 pt", mais "Titre important".
Grâce à CSS, vous pourrez dire "Je veux que mes titres importants soient centrés, rouges et soulignés"

Les Paragraphes ~ Les Titres ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Les Images ~ Insérer Image

Mettre en valeur le texte

Si, à l'intérieur de vos paragraphes, il y a plusieurs mots que vous aimeriez mettre en valeur, XHTML met à votre disposition 2 balises :

La première permet de mettre "un peu" en valeur les mots de votre texte.
La seconde permet de bien mettre en valeur les mots.

Nous allons voir quelles sont ces balises et comment les utiliser.

Mettre un peu en valeur

Pour mettre "un peu" en valeur votre texte, vous devez utiliser la balise <em></em>. Son utilisation est très simple : entourez les mots à mettre en valeur par ces balises, et c'est bon !Je reprends un peu l'exemple de tout à l'heure, et j'y mets quelques mots en évidence :

Comme vous pouvez le voir, le texte avec la balise <em> est mis en italique. Vous pouvez donc vous servir de cette balise pour mettre des mots en italique.

Mettre bien en valeur

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort" ou "important" et met le texte en gras. Elle s'utilise exactement de la même manière que <em> :

Quand est-ce que je dois utiliser <em>, et quand est-ce que je dois utiliser <strong> ?

C'est à vous de voir, ça dépend de l'importance du texte. Si c'est "un peu" important, utilisez <em>, et si les mots en question sont très importants, utilisez <strong>
C'est la même histoire qu'avec les titres : tout est une affaire d'importance, c'est à vous de décider.

Les Paragraphes ~ Les Titres ~ Importance ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Les Images ~ Insérer Image

Quelques balises plus rares (mais utiles !)

Je sais que vous avez appris pas mal de nouvelles balises dans ce chapitre, mais c'est nécessaire si vous voulez réussir votre site web.
Contrairement à ce qu'il paraît, c'est facile à retenir et ça vient très rapidement avec un peu de pratique.

Si les balises que je vous ai montrées jusqu'ici sont très fréquemment utilisées (paragraphes, titres, mise en valeur...), celles que je vais vous présenter ci-dessous sont un peu plus rarement utilisées.
Comme elles sont plus rares, je ne vous oblige pas à les retenir par coeur (mais si vous le faites bien sûr c'est mieux)
Je ne vous présente pas toutes les balises qui existent dont on pourrait se servir sur notre texte, ça serait trop long, et des fois la différence est minime.
Nous allons voir les balises suivantes :

Mettre en exposant ou en indice
Les citations
Les acronymes

Mettre en exposant ou en indice

Pour mettre en exposant certains mots ou caractères, on utilise la balise <sup>.
Les mots seront alors affichés en hauteur. Par exemple :

Pour mettre en indice (c'est-à-dire pour écrire le texte en bas de la ligne en petit), on utilise cette fois la balise <sub>.
Bon, à partir de maintenant je ne vous donnerai pas toujours le code entier de la page (c'est un peu lourd à chaque fois), là je vous donne juste la partie du code qui nous intéresse. Ici, j'utilise la mise en indice pour écrire une formule mathématique :

Bon, la mise en indice risque de servir surtout à ceux qui veulent taper des formules mathématiques, mais on sait jamais.

Les citations

On peut faire 2 types de citations :

Des citations courtes, dans un paragraphe : les citations courtes s'effectuent à l'intérieur d'un paragraphe. On encadre la citation par la balise <q>, qui fonctionne comme <em>, <strong>, <sup> etc...Voici un exemple de citation courte au milieu d'un paragraphe :

<p>Vous souvenez-vous de la phrase célèbre qu'a prononcé Neil Armstrong en posant le premier pied sur la Lune ? <q>C'est un petit pas pour l'Homme, un grand pas pour l'Humanité</q>. C'était un certain 20 Juillet 1969...</p>

<q>

Des citations longues, hors d'un paragraphe : si vous avez besoin d'effectuer une citation assez longue, vous devrez utiliser la balise <blockquote>. Vous devez mettre des balises de paragraphe <p> à l'intérieur du blockquote comme ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Le Corbeau et le Renard</h1>
<p>Voici ce qui est sans aucun doute une des plus connues fables de <em>La Fontaine</em> :</p>
<blockquote>
<p>
Maître Corbeau, sur un arbre perché,<br />
Tenait en son bec un fromage.<br />
Maître Renard, par l'odeur alléché,<br />
Lui tint à peu près ce langage :<br />
"Hé ! bonjour, Monsieur du Corbeau.<br />
Que vous êtes joli ! que vous me semblez beau !<br />
Sans mentir, si votre ramage<br />
Se rapporte à votre plumage,<br />
Vous êtes le Phénix des hôtes de ces bois."<br />
A ces mots le Corbeau ne se sent pas de joie ;<br />
Et pour montrer sa belle voix,<br />
Il ouvre un large bec, laisse tomber sa proie.<br />
Le Renard s'en saisit, et dit : "Mon bon Monsieur,<br />
Apprenez que tout flatteur<br />
Vit aux dépens de celui qui l'écoute :<br />
Cette leçon vaut bien un fromage, sans doute. "<br />
Le Corbeau, honteux et confus,<br />
Jura, mais un peu tard, qu'on ne l'y prendrait plus.
</p>
</blockquote>
</body>
</html>

Vous remarquez que les citations longues sont mises légèrement en décalé sur la droite.

Les balises <q> et <blockquote> servent toutes deux à effectuer une citation. Oui mais quelle est la différence ?

En XHTML, on distingue 2 types de balises :

Les balises de type inline : ce sont des balises que l'on utilise à l'intérieur d'un paragraphe. C'est le cas notamment des balises <strong>, <em>, <q> etc...
Les balises de type bloc : ces balises servent à structurer la page en plusieurs "blocs". La première qu'on a appris, c'est la balise <p>, mais il y a aussi les balises de titre <h1>, <h2>, <blockquote>...Vous ne devez PAS mettre de titre ou de citation longue à l'intérieur d'un paragraphe. Chacune de ces balises constitue un bloc séparé.

Les acronymes

Un acronyme est une suite d'initiales utilisée généralement pour raccourcir certains noms, comme par exemple XHTML, FIJ, CSS etc...

Le problème des acronymes, c'est qu'on ne sait pas toujours ce qu'ils signifient. Pour que le visiteur sache de quoi il s'agit, vous devez entourer votre acronyme de la balise <acronym>
La nouveauté ici, c'est que vous allez devoir utiliser un attribut (title) pour expliquer ce que signifie l'acronyme.

Comme un exemple vaut toujours mieux qu'un long discours :

<p>Le <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> est le langage qui permet de créer un site web.</p>

Comme vous pouvez le voir, si vous pointez la souris sur XHTML, la description de l'acronyme apparaît.

Vous noterez encore une petite différence entre IE et Firefox : Firefox souligne en pointillés l'acronyme, tandis qu'IE... ne fait rien

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Liens Pages ~ Les Ancres ~ Les Images ~ Insérer Image

Créer des liens

Dans le chapitre précédent, vous avez appris à créer une page XHTML toute simple. Bien moche je vous l'accorde, mais c'était une page XHTML quand même. Vous avez appris beaucoup de choses d'un coup. Aussi, pour vous laisser le temps de digérer, ce chapitre est bien moins condensé que le précédent.
Dans ce chapitre, nous allons apprendre à faire des liens entre vos pages.

Je suppose que chacun d'entre vous sait ce qu'est un lien : un texte sur lequel on peut cliquer pour se rendre sur une autre page.
On peut faire un lien d'une page a.html vers une page b.html, mais on peut aussi faire un lien vers un autre site (ex. : http://www.siteduzero.com). Dans les 2 cas, le fonctionnement est le même.

Avant de vous montrer le code XHTML qui vous permet de créer des liens, je dois absolument vous apprendre à faire la différence entre des liens absolus et des liens relatifs.

Relatif ou absolu ?

Comme je vous l'ai dit rapidement dans l'introduction, on distingue 2 types de liens :

Les liens internes à son site : normalement, votre site comportera plusieurs pages XHTML (ou alors il sera bien pauvre !). Si vous voulez faire un lien d'une page à une autre, vous ferez le plus souvent ce qu'on appelle des liens relatifs. Un lien relatif est assez court, par exemple "fichiers/cible.html".

Les liens vers d'autres sites : ce sont par exemple des liens vers "http://www.fij.be", ou vers un fichier précis (par exemple "http://www.fij.be/fichier.html"). Ces liens sont appelés liens absolus et, contrairement aux liens relatifs, ils commencent souvent par "http://".

Les liens les plus simples à priori sont les liens absolus :

http://www.siteduzero.com/page.html

... est un lien absolu. Pas compliqué jusque-là, mais un peu long à écrire.

Supposons maintenant que vous ayez 2 pages XHTML qui se trouvent dans le même dossier sur votre disque dur :

c:\site\source.html
c:\site\cible.html

Vous voulez faire un lien de source.html vers cible.html. Là c'est très simple, comme les fichiers se trouvent dans le même dossier il suffira d'écrire juste "cible.html" !

Si les fichiers ne se trouvent pas dans le même dossier :

Si votre fichier cible.html se trouve dans un sous-dossier, par exemple :

c:\site\dossier\cible.html

Si votre fichier cible.html se trouve dans un dossier parent, par exemple dans :

c:\cible.html

Alors là, pour remonter d'un dossier il faudra écrire "../cible.html"

Je ne veux pas vous embrouiller avec ces notions qui sont un peu nouvelles et abstraites pour vous. Vous allez voir en pratiquant que c'est en fait vraiment très simple et intuitif à utiliser.
D'ailleurs, on fera le plus souvent des liens relatifs, et comme pour commencer on mettra toutes nos pages .html dans le même dossier, il suffira juste d'écrire le nom de la page vers laquelle amène le lien : "page.html" par exemple.

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Les Ancres ~ Les Images ~ Insérer Image

Un lien vers une autre page

Pour faire un lien, on utilise la balise <a> .
On doit ajouter l'attribut "href" pour indiquer l'adresse de la page cible (la page vers laquelle le lien amène).

Nous allons commencer par apprendre à faire quelque chose de vital : un lien vers le Site du Zér0 :

<p>Hep ! Je connais un site qu'il est vraiment super : le <a href="http://www.siteduzero.com">Site du Zér0</a><br />
N'hésitez pas à aller le visiter, il vaut <em>vraiment</em> le coup d'oeil.</p>

C'est d'une simplicité effarante n'est-ce pas ? Vous mettez le texte du lien entre les balises <a> et </a>, et vous indiquez l'adresse de la page dans le href="" .

Si vous faites un lien vers un site qui comporte une adresse un peu bizarre avec des &, comme :

http://www.site.com/?data=15&name=mateo21&source=ms

... Vous devrez remplacer tous les & par & comme ceci :

http://www.site.com/?data=15&name=mateo21&source=ms

Vous ne verrez pas la différence, mais cela est nécessaire pour que votre page web respecte les normes du XHTM (voir Codages).
Nous venons de faire ici un lien en absolu vers un autre site ("http://"...). Maintenant, nous allons voir comment faire un lien en relatif.

Je crée 2 pages : source.html et cible.html.
source.html contient un lien vers cible.html, et les 2 pages se trouvent dans le même dossier. Voici comment je vais procéder :

<h1>source.html</h1>
<p>Tu te trouves sur source.html<br />
Souhaites-tu visiter <a href="cible.html">le fichier cible.html</a> ?</p>

<h1>cible.html</h1>
<p>Bravo ! Tu viens d'atterir sur cible.html !</p>

Pour faire plus court, j'ai omis dans mes exemples les autres balises d'en-tête qui constituent d'habitude une page XHTML (<html>, <head> etc...), mais il est bien entendu qu'il faut les mettre pour faire une vraie page XHTML.
Voilà, tout le principe de la chose est là : le lien est <a href="cible.html"> ce qui est très court. Cela implique par contre que la page cible.html se trouve dans le même dossier.
Si la page s'était trouvée dans un sous-dossier, on aurait fait le lien comme je vous l'ai expliqué plus haut dans ce chapitre :

Une bulle d'aide sur le lien

Vous pouvez, si vous le désirez car ce n'est pas obligatoire, utiliser l'attribut title : une bulle d'aide s'affichera lorsque vous pointerez sur le lien.

La bulle d'aide peut être utile pour informer le visiteur de quelque chose avant même qu'il n'ait cliqué sur le lien.
Voici comment faire :

<p>Allez donc visiter le <a href="http://www.siteduzero.com" title="Site réservé aux débutants">Site du Zér0</a></p>

Le cas des liens ouvrant une nouvelle fenêtre

Et si je veux que mon lien s'ouvre dans une nouvelle fenêtre ?

Ce n'est pas possible.
Beaucoup de sites le font, c'est vrai, mais en XHTML il n'est plus possible d'ouvrir les liens dans une nouvelle fenêtre.

C'est une décision qui a été prise : désormais on ne force plus les liens à ouvrir automatiquement une nouvelle fenêtre. Ceci afin de ne pas gêner la navigation du visiteur qui n'a pas forcément envie de voir 50 fenêtres de son explorateur ouvertes.
C'est au visiteur de décider lui-même s'il veut ouvrir le lien dans une nouvelle fenêtre. Il fera Maj + Clic sur le lien (fonctionne sur IE et Mozilla), ou encore mieux : Ctrl + Clic (pour ouvrir dans un nouvel onglet dans Mozilla).

Enfin, chose importante à savoir pour que vous compreniez un peu mieux : les personnes non-voyantes qui surfent sur le web sont perturbées par l'ouverture d'une nouvelle fenêtre de leur navigateur. Quand une nouvelle fenêtre s'ouvre, il n'est plus possible de faire "Précédente", et cela perturbe beaucoup les personnes handicapées.
C'est aussi par respect pour ces personnes-là qu'on a décidé aujourd'hui de ne plus forcer un lien à ouvrir une nouvelle fenêtre du navigateur.

J'espère que vous comprendrez et que vous appliquerez cette règle, elle est vraiment très importante.

S'il est impossible d'ouvrir une nouvelle fenêtre en XHTML, on peut en revanche le faire à l'aide de Javascript. Utilisée avec parcimonie, cette méthode est "tolérée" mais ce n'est pas de notre niveau.
Je vous en parlerai un peu plus tard.

Un lien pour envoyer un mail

Si vous voulez que vos visiteurs puissent vous envoyer un mail, vous pouvez utiliser des liens "mailto". Rien ne change au niveau de la balise, vous devez simplement modifier la valeur de l'attribut href comme ceci :

href="mailto:votrenom@bidule.com"

Il suffit donc de faire commencer le lien par "mailto:" et d'écrire l'adresse e-mail où on peut vous contacter. Un exemple :

<h2>Me contacter</h2>
<p>Pour me contacter, <a href="mailto:jean.dupont@free.fr">cliquez ici</a> !</p>

Si vous cliquez sur le lien, un nouveau message vide s'ouvre, prêt à être envoyé à votre adresse e-mail.

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Images ~ Insérer Image

Un lien vers une ancre

C'est quoi une ancre ?

Une ancre, c'est une sorte de point de repère que vous pouvez mettre dans vos grosses pages XHTML.
En effet, si votre page est très grande il peut être utile de faire un lien amenant plus bas dans la même page pour amener le visiteur directement à la partie qui l'intéresse.

Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre, ce qui va vous servir ensuite pour faire le lien vers cette ancre. Par exemple :

<h2 id="mon_ancre">Titre</h2>

Ensuite, il suffit de faire un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :

<a href="#mon_ancre">Aller vers l'ancre</a>

Normalement, si vous cliquez sur le lien, cela vous amènera plus bas dans la même page (à condition que la page comporte suffisamment de texte pour que les barres de défilement se déplacent automatiquement).
Voici un exemple de page comportant beaucoup de texte et utilisant les ancres :

<h1>Ma grande page</h1>

<p>
Aller directement à la partie traitant de :<br />
<a href="#cuisine">La cuisine</a><br />
<a href="#rollers">Les rollers</a><br />
<a href="#arc">Le tir à l'arc</a><br />
</p>
<h2 id="cuisine">La cuisine</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>

<h2 id="rollers">Les rollers</h2>

<p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>

<h2 id="arc">Le tir à l'arc</h2>

<p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>

S'il ne se passe rien quand vous cliquez sur les liens, c'est qu'il n'y a pas assez de texte. Dans ce cas, vous pouvez soit rajouter du blabla dans la page pour qu'il y ait (encore) plus de texte, ou bien réduire la taille de la fenêtre de votre navigateur pour faire apparaître les barres de défilement sur le côté.

L'attribut id sert à donner un nom "unique" à une balise, pour s'en servir de repère. Et, croyez-moi, vous n'avez pas fini d'entendre parler de cet attribut.
Ici, on s'en sert pour faire un lien vers une ancre, mais en CSS cela nous sera très utile pour "repérer" une balise précise, vous verrez.

Pour la petite histoire, les pages que vous êtes en train de lire sont pleines de ce type de lien ....

Lien vers une ancre située dans une autre page

L'idée, c'est de faire un lien qui ouvre une nouvelle page ET qui amène directement à une ancre située plus bas sur cette page.
En pratique c'est assez simple à faire : il suffit de taper le nom de la page, suivi d'un dièse (#), suivi du nom de l'ancre.

Par exemple :

... vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "rollers".

Voici une page qui contient 3 liens, chacun amenant vers une des ancres de la page de l'exemple précédent :

<h1>Le Mégamix <sup>TM</sup></h1>
<p>
Rendez-vous quelque part sur une l'autre page :<br />
<a href="ancres.html#cuisine">La cuisine</a><br />
<a href="ancres.html#rollers">Les rollers</a><br />
<a href="ancres.html#arc">Le tir à l'arc</a><br />
</p>

En résumé donc, on distingue 2 types de liens :

Les liens vers d'autres pages, de loin les plus courants.
Les liens vers des ancres, pour amener plus bas sur une même page.

Il y a aussi, comme vous l'avez vu, la possibilité de faire des liens qui amènent vers une ancre située sur une autre page. Bref, vous avez l'embarras du choix.

Le véritable enjeu de ce chapitre était surtout de bien vous faire comprendre la différence entre un lien relatif et un lien absolu... et vous apprendre à écrire des liens en relatif. Je trouve que c'est assez intuitif et que ça se comprend plutôt bien, mais si par hasard vous pensez ne pas avoir bien compris les liens en relatif, n'hésitez pas à poser une question à Géraldine.

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Insérer Image

Les images

Insérer une image dans une page web, c'est d'une facilité déconcertante.
Pour peu que vous ayez compris comment fonctionnent les adresses relatives dans le chapitre précédent, ce chapitre sur les images n'offre pas la moindre difficulté.

Alors, tant qu'à faire de ce chapitre une vraie croisière, on va commencer tranquillement en étudiant quels sont les différents types d'images que l'on peut utiliser dans une page web (JPEG, PNG, GIF...).

Différents formats d'images

Savez-vous ce qu'est un format d'image ?

Quand vous avez une image entre les mains, vous avez la possibilité de l'enregistrer dans plusieurs "formats" différents. Le poids (en Ko) de l'image sera plus ou moins élevé selon le format choisi, et la qualité de l'image va changer.
Par exemple, le logiciel PhotoShop vous propose de choisir entre plusieurs formats lorsque vous enregistrez une image.

Certains formats sont plus adaptés que d'autres selon l'image (photo, dessin, image animée...). Notre but ici est de faire le tour des différents formats que l'on utilise sur le web, pour que vous les connaissiez et sachiez choisir celui qui convient le mieux à votre image. Rassurez-vous, il n'y a pas beaucoup de formats différents, ça ne sera donc pas bien long.

Toutes les images diffusées sur Internet ont un point commun : elles sont compressées. Cela veut dire que l'ordinateur fait des calculs pour qu'elles soient moins lourdes et donc plus rapides à charger.
Voici les formats d'images que l'on utilise sur le web :

JPEG : le format JPEG est très répandu. Il est particulièrement adapté pour les photos, et c'est d'ailleurs souvent dans ce format-là qu'est l'image de votre fond d'écran Les images de type JPEG ont généralement l'extension ".jpg", mais aussi parfois ".jpeg" (ça revient au même).
Voici un exemple d'image au format JPEG :

Capital of Belgium Chapter

PNG : le format PNG est le plus récent de tous. Ce format est adapté à la plupart des graphiques (je serais tenté de dire "à tout ce qui n'est pas une photo"). L'avantage du PNG, c'est qu'il peut être rendu transparent, ce qui est très appréciable.
Le PNG existe en 2 versions :
- PNG 8 bits : le PNG 8 bits est la version du PNG limitée à 256 couleurs. 256 couleurs c'est assez peu, quand on sait que le JPEG supporte plusieurs millions de couleurs... Mais ça suffit bien souvent pour des petits graphiques, comme par exemple celui-ci :

fleur

PNG 24 bits : le PNG 24 bits est la version du PNG la plus évoluée, elle supporte plusieurs millions de couleurs (comme le JPEG). Quel intérêt d'utiliser le PNG 24 plutôt que le JPEG ? Pour la transparence ! Ca permet de créer de beaux effets de transparence facilement sur des éléments graphiques, notamment pour le design de votre site web.
Malheureusement voilà, ce serait trop beau et il fallait qu'il y ait anguille sous roche : Internet Explorer est à la masse. Il ne gère pas bien le PNG 24 bits : il peut afficher l'image, mais n'affichera pas la transparence. Regardez cette image :

voiture

GIF : c'est un format assez vieux, qui a été néanmoins très utilisé (et qui reste très utilisé par habitude). Aujourd'hui, le PNG est bien meilleur que le GIF : les images sont plus légères et la transparence est meilleure. Je vous recommande donc d'utiliser le PNG autant que possible.
Le format GIF est limité à 256 couleurs (alors que le PNG peut aller jusqu'à plusieurs millions de couleurs). Si je vous parle du GIF, c'est qu'il conserve quand même un avantage que le PNG n'a pas : il peut être animé. Exemple :

Travaux

Les autres formats non cités ici, comme le format BITMAP (*.bmp) sont à bannir car bien souvent ils ne sont pas compressés, donc trop gros, donc pas du tout adaptés au web.

Si on résume, voici quel format adopter en fonction de l'image que vous avez :

Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG.
Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits si possible car le format est meilleur, sinon utilisez un GIF.
Une image animée : utilisez un GIF animé.

Pour le PNG 24, eh bien en attendant qu'il soit supporté par Internet Explorer il vaut mieux le laisser au placard

Si vous voulez éviter des problèmes, prenez l'habitude d'enregistrer vos fichiers avec des noms en minuscules, sans espaces ni accents. Par exemple : mon_image.png
Vérifiez aussi que l'extension est en minuscules.

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Les Images

Insérer une image

Allez, intéressons-nous maintenant au code XHTML.

Pour insérer une image, on doit utiliser la balise <img />.
C'est une balise de type seule (comme <br />).
Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin en absolu (ex. : "http://www.site.com/fleur.png") soit, et c'est ce qu'on fait le plus souvent, mettre le chemin en relatif. Ainsi, si votre image est dans un sous-dossier "images" vous devrez taper : src="images/fleur.png".

alt : cela signifie "texte alternatif". On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (ça arrive), ou sur les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas "voir" l'image. Pour la fleur, on mettrait par exemple : alt="Une fleur".

Je suis conscient que cela doit vous paraître barbant de mettre un texte alternatif, surtout que ça ne vous semble pas à priori "utile", mais il faut absoluement que vous le fassiez. Si vous ne le faites pas, votre page ne sera plus une page XHTML "valide" et votre site sera détecté comme non conforme aux normes.

Voici un exemple d'insertion d'image :

<p>
Voici une photo que j'ai prise lors de mes dernières vacances Biker à St Trop:<br />
<img src="images/strop.jpg" alt="Photo de St Trop" />
</p>

Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se trouve l'image avec un chemin relatif.
La plus grosse "difficulté" (si on peut appeler ça une difficulté) consistait à choisir le bon format d'image. Ici, c'est une photo donc c'est évidemment le format JPEG qu'on a utilisé.

Notez que les images se mettent obligatoirement à l'intérieur d'un paragraphe (<p></p>). Si vous ne le faites pas, comme pour "alt" la page s'affichera correctement mais votre page ne sera alors plus valide.

Une bulle d'aide

Sous Internet Explorer, si vous pointez sur l'image dans l'exemple précédent, vous voyez le texte alternatif s'afficher sous forme de bulle d'aide. Ce n'est pas normal, car l'attribut n'est pas fait pour afficher une bulle d'aide.

L'attribut fait pour afficher une bulle d'aide est le même que pour les liens, c'est title. Cet attribut est facultatif (contrairement à "alt").
Voici ce que ça donne :

<p>
Voici une photo que j'ai prise lors de mes dernières vacances Biker à St Trop:<br />
<img src="images/strop.jpg" alt="Photo de St Trop" title="Ca fait envie hein ?"/>
</p>

Si je résume :

L'attribut permettant d'afficher une bulle d'aide est title.
Sous Internet Explorer seulement, le texte alternatif (alt) est affiché sous forme de bulle d'aide s'il n'y a pas d'attribut title. C'est un cas particulier car normalement on n'affiche pas le texte alternatif sous forme de bulle d'aide.
Si vous avez mis les deux attributs (alt et title) alors Internet Explorer affichera le texte du title sous forme de bulle d'aide, ce qui cette fois est normal.
Tous les autres navigateurs sauf Internet Explorer afficheront une bulle d'aide seulement s'il y a un attribut title.

Quand je dis que parfois Internet Explorer fait des choses qui ne sont pas "normales" c'est parce qu'il ne respecte pas toujours très bien les règles qui ont été établies sur le web.

Image cliquable

Comme le texte, une image peut très bien servir de lien. Au lieu de mettre du texte entre les balises <a></a>, vous pouvez très bien mettre une balise <img /> !
Par exemple :

<p>Vous souhaitez vous rendre vers un endroit magique ? Rien de plus simple, cliquez sur l'image ci-dessous :<br />
<a href="http://www.americanchoppers.be"><img src="images/bike.jpg" alt="Photo de HD " title="Clique pour voyager !" /></a>
</p>

L'ennui, c'est qu'un cadre bleu (ou violet) bien moche s'affiche autour de votre image cliquable.
Heureusement, on va pouvoir "enlever" ce cadre grâce à CSS.

Les Paragraphes ~ Les Titres ~ Importance ~ Rareté ~ Les Lienss ~ Liens Pages ~ Les Ancres ~ Les Images ~ Insérer Image

Document original : http://www.siteduzero.fr/

17/04/20006

Tutorial XHTML > Bases

By LeDide