Conseils et astuces pour vos sites

divers

faire une sitemap (Plan du site)

sur certains sites, (dont le mien) si vous utilisez Firefox muni de l'extension Navibar, vous avez déja vu un plan du site dans le panneau latéral. Vous trouvez ceci très pratique et vous aimeriez en faire profiter les visiteurs de votre site mais vous ne savez pas comment faire ? Ce n'est pas très compliqué. Il existe des logiciels qui font ceci en quelques clics, mais ils sont payants. Ne vous fiez pas non plus aux versions d'évaluation de ces logiciels, la plupart ont des restrictions assz contraignantes(ex: sitemap pro : seulement 6 urls!!). Toutefois si vous trouvez un logiciel gratuit qui fait ca bien, vous pouvez me contacter

vous devrez faire un fichier que vous nommerez "sitemap.rdf" et que vous deposerez a la racine de votre site. Vous pouvez faire ce fichier avec le bloc-notes mais cest plus pratique d'avoir un logiciel qui colore et range le code, comme PSPad editor. Si vous n'avez pas ce logiciel ou un logiciel similaire je vous invite à le télécharger. En plus il fait aussi xslt, rss, html... et une multitude d'autres formats. Si vous voulez vous pouvez également regarder la sitemap de mon site : sitemap.rdf. Appuyez sur Ctrl+U dans Firefox pour voir son code source.

quand vous avez téléchargé et installé le logiciel, crééz un nouveau fichier texte que vous nommerez "sitemap.rdf", puis ouvrez le avec votre éditeur. Vous voyez une page vide. C'est normal pour le moment. Nous allons maintenant remplir cette page. Tout d'abord il faut indiquer la version de votre fichier, c'est à dire la première version. Vous devez écrire sur la première ligne de votre fichier le code

qui indique que la version du fichier xml est la version numéro 1.

vous devez ensuite indiquer le code qui suit : ce sont diverses adresses en rapport avec la validité de votre fichier.

vous avez terminé la première partie. Maintenant nous allons faire votre sitemap. Une sitemap est présentée sous forme d'arborescence : des dossiers contenant des fichiers ou d'autres dossiers.

nous allons indiquer le contenu de votre sitemap. Vous n'êtes pas obligé d'indiquer tout le contenu de votre site dans la sitemap, c'est vous qui choisissez ce que les visiteurs pourront voir ou pas. Vous pouvez aussi y mettre des liens externes (vers d'autres sites).Vous choisissez également l'organisation des dossiers et des fichiers de votre sitemap : elle ne dépend pas de celle de votre site.

la première partie de ma sitemap est :

? Ca veut dire quoi tout ce charabia ?
Ne vous inquiétez pas. Ceci vous paraitra beaucoup plus clair une fois que vous aurez fini de lire ce tutoriel. Je vous explique ce code :

Cette ligne est obligatoire pour une sitemap. Elle indique le début de l'arborescence et les éléments qui seront au "premier niveau"(disons ca comme ca).

Indique le début du contenu de la sitemap, de ce que les visiteurs de votre site verront. Obligatoire également.

Veut dire : l'élément "syl:home" sera affiché en premier, puis celui "syl:cestquoi", etc...
Obligatoire aussi, a moins de ne rien vouloir mettre dans sa sitemap...

Indique la fin du contenu de votre sitemap. Obligatoire.

c'est maintenant que cela devient intéressant. Je vous ai parlé "d'éléments", nous allons maintenant les rajouter dans votre sitemap. Nous allons par exemple indiquer le contenu de l'élément

il faut mettre du code qui donnera le titre du contenu ainsi qu'un lien vers la page correspondante. Le code

Indique le contenu de l'élément "syl:home"

que veut dire ce code?

Indique le début d'un élément et dit : Cet élément est l'élément "syl:home".

Veut dire : Le titre de cet élément est "Ssylvainsab - Accueil"

Indique la page vers laquelle dirige l'élément.

Indique la fin du contenu de l'élément.

donc le code :

Veut dire : La version de ce fichier est la version 1.
Le contenu de la sitemap sera l'élément "syl:home".
Le titre de l'élément "syl:home" est Ssylvainsab - Accueil et c'est un lien vers la page http://ssylvainsab.free.fr/index.html.

evidemment une sitemap avec seulement la page d'accueil n'aurait pratiquement aucun intêret. Il vous faut donc rajouter des éléments.

nous allons voir ici comment faire pour ajouter des dossiers a votre sitemap. Par exemple, nous voulons que la sitemap contienne la page d'accueil et un dossier de photos. il faudra entrer le code :

voici ce que le visiteur verra lorsqu'il visitera votre site :

Si vous ne voulez pas mettre de lien sur un dossier, il suffit de mettre une ancre (un dièze) à la place. Exemple :

vous pouvez faire autant de dossiers et de fichiers que vous voulez à l'interieur d'autant de dossiers que vous voulez. Par contre attention, il ne faut pas mettre d'accent ou d'autre caractere à part "-" ou "_" dans votre fichier, sinon il y aura à la place un point d'interrogation.

voila, vous savez maintenant comment faire une sitemap. Notez qu'il existe un validateur pour ce type de documents : http://www.w3.org/RDF/Validator/

Si votre document n'est pas valide, vérifiez :

• Que toutes les balises sont bien fermées dans le bon ordre
• Que vous n'avez pas oublié de guillemets
• Que vous n'avez pas mi un caractère invalide

les tableaux

attribut summary

Utilisez toujours l'attribut "summary" dans vos tableaux. C'est une règle pour respecter les normes (http://www.w3.org/) d'internet.
Cet attribut est une sorte de "alt" pour un tableau.

L'attribut "alt" est le texte qui s'affiche à la place d'une image lorqu'elle n'est pas chargée. Par exemple le code html :

affichera :

Cependant si la source est éronnée (par exemple en se trompant on met .png au lieu de .gif) :

ce qui sera affiché à l'écran sera : car le lien vers l'image est erronné.
Mais avec l'attribut "alt" on sait quand même de quoi va parler la page. Très utile.

Si on n'avait pas mis d'attribut "alt" ce qui aurait été affiché serait :
.
La, aucun idée du thème de la page. Beaucoup moins pratique.

eh bien c'est un peu pareil pour un tableau. Par exemple l'attribut "summary" du tableau de la page Temp de mon site est "Videos et fichiers".
De cette façon le visiteur de mes pages sait de quoi va parler le tableau.

En fait cet attribut et l'attribut "alt" servent plutot dans les navigateurs en mode texte, comme Lynx,
ou pour les personnes qui ont désactivé les images sur leur navigateur.

"Thead" et "Tfoot"

dans vos tableaux, vous avez sans doute déja voulu mettre un en-tête ou un pied, mais vous ne savez pas comment faire?
C'est très simple.

habituellement votre tableau est en une partie : le corps (tbody) : regardez ce tableau de base :

liens.html
news.html
index.html

...et son code html (que j'ai coloré pour qu'il soit plus "lisible") :

décortiquons-le :

Indique le début du tableau

Est l'attribut "summary". Si vous ne savez pas ce que c'est voyez plus haut : ^

Est le "style" (comme son nom l'indique) du tableau. Il est indiqué ici que le texte est aligné au centre des cellules (les "cases") et que mon tableau fait 400 pixels de large.

Indique que la bordure fera 2 pixels, qu'il y aura 2 pixels entre la bordure et le contenu de chaque cellule et qu'il y aura une marge de 2 pixels entre chacune des cellules.

Tout ce qui va suivre dans cette balise sera le corps du tableau.

Tout ce qui va suivre dans cette balise sera une ligne du tableau (une balise <tr> = une ligne avec un nombre x de colonnes)

Ceci indique une cellule. Ce qui va suivre sera son contenu. Il y a autant de balises <td> par ligne que de colonnes dans votre tableau.

Donc :

Veut dire : Dans le corps du tableau (<tbody>), il y a une ligne (<tr>[...]</tr>) qui comporte deux cellules (<td>liens.html</td><td>[...]</td>).
Le contenu de la première cellule est "liens.html" et celui de la deuxième est

qui veut dire : Il y a ici un image de largeur 150 pixels et de hauteur 35 pixels.
Cette image se nomme : liens.gif
Si elle ne s'affiche pas, il faut afficher à la place le texte "Liens".

donc un tableau est formé comme ceci :

Vous pouvez ajouter autant de lignes, de colonnes et de celulles que vous voulez : exemple : un tableau à quatre colonnes et deux lignes :

cela donne : 

maintenant je vais vous montrer comment faire un en-tête et un pied à votre tableau (si vous avez bien compris ce que j'ai expliqué avant, ce sera facile) :

Vous vous souvenez, je vous ai dit :
"

Tout ce qui va suivre dans cette balise sera le corps du tableau."

eh bien c'est très simple, les en-têtes et les pieds se forment de la même manière que le corps du tableau :
il suffit de mettre des balises <thead>[...]</thead> (pour l'en-tête) ou <tfoot>[...]</tfoot> (pour le pied) avant les balises <tbody>[...]</tbody>.

La seule chose qui peut paraître illogique, c'est que le pied est placé avant le corps dans le code html, mais il apparait après dans le tableau. Retenez bien ceci pour ne pas vous tromper.
 
Par exemple, pour le tableau que vous avez vu avant cela donne :

page	image
liens.html
news.html
index.html

Et le code html est :

Vous pouvez choisir ce que vous voulez faire : avec/sans  :   pied/en-tête.
avec un pied le code aurait été :

page	image
liens.html
news.html
index.html

Ca ne sert pratiquement à rien, mais je vous le dis quand même : vous pouvez mettre autant de pied/en-tête que vous voulez. Par contre, seul le premier "pied" sera considéré comme tel(sera placé en bas du tableau). Les autres seront considérés comme des en-têtes(en haut du tableau).

ah mais au fait, a quoi ca sert d'utiliser des en-têtes et des pieds, on aurait pu utiliser des lignes normales, c'aurait été pareil!

Pas tout à fait : avec les balises "thead" et "tfoot" :

• Votre code est mieux organisé, c'est plus facile de s'y retrouver
• Si vous mettez des lignes à la place, si vous voulez ajouter une ligne à votre tableau, vous devrez faire bien attention à ne pas l'ajouter avant les en-têtes ou pieds de page, alors qu'avec ceci, la ligne se mettra au bon endroit.
• Avec le CSS, vous pouvez faire un style différent aux en-tête, pieds de pages et corps du tableau.

astuces

mettre une favicône sur son site

Sur certains sites, peut-être avez vous remarqué une petite image à gauche de l'url(et de l'onglet dans firefox) :

favicône :

Par exemple quand vous surfez sur les pages de mon site, vous voyez : . Cette image s'apelle une "favicône". C'est pratique pour repérer quel onglet correspond à quel site.
Vous en voulez une sur votre site?

Voici les étapes à suivre pour mettre un favicône sur votre site :

1. Créez une image aux dimensions 16 pixels sur 16 pixels (environ) (avec paint : menu image puis attributs)
2. Enregistrez-la sous le nom "favicon.ico"
3. Deposez-la à la racine de votre site
4. C'est tout ! Dorénavant les visiteurs qui iront sur votre site verront cette favicône.

Notez que si vous ne déposez pas la favicone a la racine de votre site, vous devrez indiquer son emplacement dans chaque page pour qu'elle s'affiche, en faisant de cette facon :
Dans les balises <head> de votre page, mettez le code suivant : <link rel="shortcut icon" href="emplacement de votre favicone">.

Vous pouvez également utiliser plusieurs favicones sur des pages différentes pour votre site, en changeant l'emplacement de la favicone.

Il existe un validateur pour les favicones : http://www.html-kit.com/favicon/validator/

voyez aussi : http://www.commentcamarche.net/faq/sujet-332    http://www.xhtml.net/xhtmlcss/favicon

mettre une icône signalant la préscence d'un flux RSS sur son site

sur certains sites, vous avez sans doute remarqué la présence de l'image , située à droite de l'url et signalant un flux RSS sur le site. Vous aimeriez bien faire pareil ?

Icône signalant un flux RSS

C'est très simple :
Une fois que vous avez créé votre flux RSS, mettez le code html

entre les balises <head> et <head> de la page/des pages ou vous souhaitez voir cette image.

exemple : sur ma page d'accueil, j'ai indiqué le code suivant : 

cependant attention : il faut mettre ce code sur chaque page ou vous voulez voir cette image. Sur ce site je l'ai mis sur la page d'acccueil, les news et la page du flux.

a retenir pour vos pages :

vous pouvez regarder le code sources des pages des autres sites. C'est assez instructif.

Pour les images sur internet, n'utilisez que les formats .gif,(pour les dessins sans trop de nuances) .png(pour les dessins) ou .jpg(pour les photos). Les autres formats sont trop lourds ou pas adaptés.

Utilisez les attributs "alt" pour vos images et "summary" pour vos tableaux. Sinon vos pages ne seront pas valides(http://www.w3.org/).

respectez les standards du WEB (http://www.w3.org/)

si vous le pouvez, utilisez le logiciel TidyGUI pour vérifier vos pages avant de les mettre en ligne.

L'extension WebDeveloper pour Firefox est très pratique : elle vous permet de vérifier vos fichiers CSS, html, rss.... et bien d'autres choses.

validez vos pages avant de les mettre en ligne :

les validateurs :

• html : http://validator.w3.org/
• css : http://jigsaw.w3.org/css-validator/
• rss : http://validator.w3.org/feed/
• xml, rdf, sitemap : http://www.w3.org/RDF/Validator/
• favicône : http://www.html-kit.com/favicon/validator/