Aller au contenu

Site professionnel

michaeljack

Par michaeljack
dans Techniques de Référencement

 Partager

Sujets conseillés

michaeljack

michaeljack

Posté
Posté (modifié)

Bonjour a toutes et à tous !!!!

J'ai décidé il y a maintenant quelques temps de créer mon entreprise de dépannage informatique à domicile sur ma chère ville de Lyon.

En paralléle, j'ai cru donc bon de préparer un site web qui serait ma future vitrine ou catalogue de mes prestations. J'ai donc opté pour un kit graphique kooliss que j'ai adapté à ma manière.

Je compte bien sur l'héberger ailleurs que sur mon site free et lui prendre un .fr dès que celà sera possible.

En attendant, il se trouve ici: http://michaeljack.free.fr/siteinfo

Je voulais savoir ce que vous en pensiez au niveau:

-services proposés

- référencement

- charte graphqiue

etc...

Je vous remercie d'ores et déja d'avance de vos réponses. ;)

ps: Je ne comprends les messages d'erreur du w3c....

Modifié par michaeljack
  • Réponses 65
  • Créé
  • Dernière réponse

Contributeurs actifs dans ce sujet

Jours d'activité

Contributeurs actifs dans ce sujet

Jours d'activité

Perrine

Perrine

Posté
Posté

Bonjour michaeljack,

Côté référencement, il serait bien de changer le titre des pages "votresite.com" avec un titre contenant tes mots clés ;)

Pense à compléter les "alt" de tes images, notamment pour le menu. En plus, ça améliore l'accessibilité de ton site.

Pour l'image bleue sous le logo, attention à ne pas confondre les alt et les title. Les alt sont du texte alternatif qui s'affiche si l'image ne s'affiche pas. Donc, il contient en général une phrase descriptive. Le title contient quant à lui du texte qui s'affiche lorsque le curseur survole l'image. Perso, j'essaie d'y mettre un texte plus dynamique : "Visiter tel site par ex".

Dans ton cas, puisque l'image n'apporte rien en terme de contenu et est seulement un "plus" graphique, l'idéal serait encore de mettre cette image en fond dans le <td>

Les titres, "aide informatique", "dépannage et réparation" (...) en orange devraient plutôt être contenus dans des <h1> par ex. Les dl sont des listes de défintion. Dans tes pages, tu peux soit utiliser des listes (ul pour des listes non numérotées et ol pour les listes numérotées) ou tout simplement des paragraphes <p>.

Côté graphisme, je le trouve joli et facile de consultation.

Sur cette page : http://michaeljack.free.fr/siteinfo/recup.htm tu as un grand espace entre ton texte et le bas de page, c'est du aux multiple balises vides. Pense à les supprimer si tu n'y ajoutes pas de texte.

Pour finir, je ne saurai que trop de conseiller de dissocier contenu et forme grâce aux CSS afin de supprimer complètement les attributs contenus dans les balises et surtout d'alléger le chargement de tes pages ;)

michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

J'avoue ne jamais avoir su dissocier contenu et et forme grâce au css.....

Les titres sont normalement tous en place, j'ai mis le doctype. j'ai mis la balise alt pour le menu de chaque page, barre belue alté également.....

Merci de ton aide, pour le reste, je ne sais pas faire, lol

le doctype n'a visiblement pas règlé les problemes d'erreurs w3c

Modifié par michaeljack
Perrine

Perrine

Posté
Posté

Il faudrait reprendre pas à pas toutes les modifications que tu as effectuées. Si tu n'as modifié que les alts des images, je ne comprends pas d'où vient le décalage et se plonger dans le code comme ça, ça va être chaud ^^

Néanmoins, je suis en train de regarder comment optimiser tout ça ;)

La question ensuite est de savoir si tu as le temps, et l'envie, de te plonger dans le HTML (et encore mieux le XHTML) et CSS pour voir si tu pourras apporter les améliorations sur toutes les pages.

Je regarde ta page index et je te donne les modifications que j'y ferai, ensuite, on verra ;)

Perrine

Perrine

Posté
Posté

Bon, finalement, je me suis laissée prendre au jeu :blush:

Déclaration de l'encodage des caractères

Cette ligne <META http-equiv="Content-type" ONTENT="text/html;charset=iso-8859-1"> apparait 2 fois dans ton <head>, c'est inutile. Et quand tu déclares le charset (jeu de caractères), autant le faire en début de <head> pour que cela s'applique à tous les métas.

Il y a ensuite une foule de balises META, je n'en connais pas la moitié. Les plus importantes sont la balise keywords (mots clés) et description. Bien sûr, la balise title est à bien travailler et je vois que tu l'as déjà changé ;)

Utilisation des CSS

Quand je te conseillais de passer aux feuilles de style, c'était pour éviter ce genre de chose :

<body bgcolor="#ffffff" background="images/fond.jpg" text="#333333" link="#FF6600" vlink="#333333" alink="#FF6600">

Ici, les attributs de mise en forme sont bgcolor (pour déterminer la couleur de fond), background (pour l'image de fond), text pour la couleur du texte et les 3 autres pour les couleurs de liens. Tous ces attributs sont normalement enregistrés dans la feuille de style et n'apparaissent pas dans le document (mais dans ton cas, comme tu utilises du HTML 4.1, c'est possible)

Quand on parle de dissocier contenu et mise en forme, c'est que d'un côté, on a le code XHTML avec les balises (hx, p, div, ... ) qui sont le contenu et d'un autre côté, dans la feuille de style, tout ce qui est en rapport avec la mise en forme (couleurs, images de mise en forme, bordures ...)

L'enjeu est donc de construire une page épurée, avec le contenu uniquement puis de construire une feuille de style associée pour la mettre en forme. On se suit ? :)

Je ne suis plus très à l'aise pour la mise en forme des pages avec des tableaux donc je te file une page en XHTML, sans tableau et si tu as des questions, je les commenterai au mieux ;)

Le nouveau code

- Il y a 2 façons de définir des styles. Tu peux soit définir les styles dans la page html, (comme tu le fais en partie avec cette partie de ta page :

<style type="text/css">

<!--

.Style5 {color: #FF0000; font-weight: bold; }

.Style6 {color: #FF0000}

.Style12 {font-size: 14px}

-->

</style>

Soit créer une feuille externe, avec l'extension .css, et l'appeler avec la balise <link>

<link href="akilons.css" rel="stylesheet" type="text/css">
ou @import

Je choisis la balise <link>

- Avec une largeur de 790px, les utilisateurs qui utilisent une résolution en 800x600 auront une barre de défilement horizontale. Pour éviter cela, il vaut mieux utiliser une largeur de 750px

- Je te conseille de supprimer les images du menu. Elles n'apportent pas de "+ graphique" et servent à présenter du texte donc on va utiliser nous aussi du texte dans notre page HTML. On récupère bien entendu les petites puces situées à droite des liens.

- La page se décompose maintenant de la façon suivante :

Un div #page qui englobe le tout et permet de définir la largeur de ta page

Un div #menu pour le menu

Un div #gauche et un #droite pour les 2 colonnes

Un div #footer

Un ultime div #image pour positionner l'image qui change à chaque page.

Pour construire tes autres pages, tu as juste à remplacer les textes à priori. S'il y a des cas particuliers, on regardera ;)

- J'ai mis à cette adresse la page avec les images qui y sont liées : http://www.toulouse-webmaster.com/mickael/mickael.htm

Et voici le code :

<body>
<div id="page">
<h1 class="titre">Support informatique / Dépannage, formation, assemblage</h1>
<div id="menu">
  <ul>
    <li>Retour à l'accueil</li>
	<li>Dépannage</li>
	<li>Formation</li>
	<li>Assemblage</li>
	<li>Récupération</li>
	<li>Produits</li>
	<li>Société</li>
  </ul>
</div>
<div id="gauche">
<h1>Aide informatique</h1>
<p><span class="Style5">S</span>upport <span class="Style5">Info</span>rmatique est ravi de vous accueillir sur son espace web.</p>
<p>Nos techniciens sont à votre service pour répondre à vos questions, vous former, que ce soit pour le support matériel ou logiciel.</p>
<p>Les interventions s'effectuent uniquement en agglomération lyonnnaise.</p>
<p>Cette société est en cours de création. Vous êtes intéressé par ce projet? Faites le savoir en écrivant à: michaeljack_AT_free.fr ou en répondant à ces quelques questions.</p>
<p>Comment nous contacter?</p>
<p>Par téléphone: 04 78 LA SOCIETE EST EN COURS DE CREATION</p>
<p>Par mail: EN COURS DE CREATION</p>
<hr  />
</div>
<div id="droite">
<h2>Tarifs</h2>
<p>Le déplacement d'un technicien est facturé à la prestation. Les prix approximatifs sont indiqués dans chacune des rubriques du site.</p>
<h2>Prestations de services</h2>
<ul id="presta">
  <li>Création, montage et installation d'un ordinateur sur mesure selon vos besoins.</li>
  <li>Expertise et conseil sur tout achat informatique, ainsi que sur les moyens de protection de votre ordinateur.</li>
  <li>Installation et configuration du système d'exploitation ( Windows ou Mac OS) ou de logiciels (antivirus, bureautique...).</li>
  <li>Dépannage et réparation de votre matériel informatique.</li>
  <li>Récupération de vos données informatiques en cas de problême ou de non fonctionnement de votre ordinateur.</li>
  <li>Formation sur logiciels courants, achetés ou fournis avec votre ordinateur.</li>
  <li>Conseil sur les fournisseurs d'accès Internet, ou autres renseignements informatiques.</li>
</ul>
<hr />
</div>
<div id="footer">Une réalisation <a href="http://www.kooliss.net" target="_blank">kooliss.net</a> © 2004</div>
</div>
</body>

*{
margin:0;
padding:0;
border:0;
}

body{
background:#FFFFFF;
font:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#333333;
}

.Style5 {color: #FF0000; font-weight: bold; }
.Style6 {color: #FF0000}
.Style12 {font-size: 14px}

p{
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.4;
}

#page{
width:750px;
background:#FFFFFF url(img/header.jpg) top no-repeat;
margin:0 auto;
padding-top:160px;
}

h1{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
text-align:center;
padding:5px 0;
}

h1.titre{
display:none;
}

h2{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
text-align:center;
padding:5px 0;
}

#menu{
width:150px;
background:#FFFFFF url(img/menu.jpg) top right no-repeat;
padding:0 172px 0 0;
text-align:right;
}

#menu li{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#FFFFFF url(img/bouton.jpg) right no-repeat;
padding:0 18px 0 0;
list-style:none;
line-height:1.5;
}

#gauche{
width:260px;
float:left;
padding-left:150px;
padding-right:20px;
padding-bottom:30px;
}

#gauche p{
padding-bottom:15px;
}

#droite{
width:260px;
float:left;
padding:0 10px 30px 20px;
}

#presta li{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
background:#FFFFFF url(img/bulle.jpg) top left no-repeat;
list-style:none;
padding-left:23px;
padding-bottom:5px;
line-height:1.5;
}

hr{
color:#999999;
}

#footer{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
width:100%;
padding-top:20px;
clear:both;
text-align:center;
background:#FFFFFF url(img/copyright.jpg) top no-repeat;
}

S'il y a des zones d'ombre, hésite pas ;)

Essaie de décortiquer le code pour pouvoir construire toutes les autres pages sur ce modèle. A ce niveau, la page est valide XHTML 1.0 Transitional.

Pour finir, je ne saurai que trop te conseiller de visiter les sites du Top Sites pour mieux comprendre tout ça :)

smile

smile

Posté
Posté
En paralléle, j'ai cru donc bon de préparer un site web qui serait ma future vitrine ou catalogue de mes prestations. J'ai donc opté pour un kit graphique (...)

Perso je vois qu'une image en haut et en bas, sinon le reste est blanc :wacko:

Peut etre un bug de mon navigateur ;)

Je viens de sortir un kit qui irait bien avec ton activité mais bon t'as déjà choisi, au cas ou ca interesserait certains c'est ici :

http://www.kitgrafik.com/kits/version-v-1002.html

Bon site :)

michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

Azon tu es vraiment incroyable je ne sais comment te remercier !!!!!

:o

Une question, comment les images s'affichent elles alors que je ne vois leurs adresses nul part dans le code?

edit: je n'ai rien dit, elles sont visiblement dans la css..... :wacko:

Modifié par michaeljack
michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

J'ai une autre question. Comment faut-il appeler les images? je les ai mises dans un repertoire /img

michaeljack.free.fr/new

Merci

Modifié par michaeljack
Kimberlyclarko

Kimberlyclarko

Posté
Posté (modifié)

ton fichier css s'appelle akilons.css, il s'agit de la ligne suivante :

<link href="akilons.css" rel="stylesheet" type="text/css">

Je te conseille de mettre un / devant akilons (comme ca : href="/akilons.css")

Comme ca, tu pourras utiliser le même code si tu mets des pages dans un répertoire

Bonne continuation ;)

EDIT : A ben tu as changé de question en cours de route ? :D

Modifié par kimberlyclarko
michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

Oui excuse moi, j'avais trouvé..... Merci du tuyau tout de même.

Je vous remercie vraiment de me venir en aide.

POur les images, il suffisait de les renommer..... C'est fait...

Par contre, un petit souci, le header était composé en deux parties.... la je ne peux en afficher qu'une....

Modifié par michaeljack
Kimberlyclarko

Kimberlyclarko

Posté
Posté (modifié)
J'ai une autre question. Comment faut-il appeler les images? je les ai mises dans un repertoire /img

michaeljack.free.fr/new

Merci

<{POST_SNAPBACK}>

Tout simplement avec la balise image :

<img src="/img/nomdelimage.jpg(ougif)" alt="description de l'image">

EDIT : si tu change de question à chaque fois, ca ne va pas être facile !!! MDR :blink:

La prochaine fois, cherche un peu tout seul et tourne 7 fois ta souris sur son tapis :lol:

Modifié par kimberlyclarko
michaeljack

michaeljack

Posté
  • Auteur
Posté
Tout simplement avec la balise image :

<img src="/img/nomdelimage.jpg(ougif)" alt="description de l'image" width="largeurenpixelsdelimage" height="hauteurenpixelsdelimage" border="0">

EDIT : si tu change de question à chaque fois, ca ne va pas être facile !!! MDR  :blink: 

La prochaine fois, cherche un peu tout seul et tourne 7 fois ta souris sur son tapis  :lol:

<{POST_SNAPBACK}>

Merci beaucoup, mais n'es-ce pas contraire à la volonté de séparer design du contenu?

Kimberlyclarko

Kimberlyclarko

Posté
Posté
Merci beaucoup, mais n'es-ce pas contraire à la volonté de séparer design du contenu?

<{POST_SNAPBACK}>

Une image c'est du contenu... Sauf si tu t'en serts pour effectuer une mise en forme, ce qui n'est pas conseillé ;)

michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

Je viens de tester et celà ne m'affiche que le texte contenu de la balise "alt"

Modifié par michaeljack
Kimberlyclarko

Kimberlyclarko

Posté
Posté

Je viens de voir que tu es en XHTML 1.0, c'est peut être un peu "chaud" pour commencer... tu dois fermer la balise image comme ceci : />

par ailleurs, je crois que c'est mieux si elle est dans un paragraphe (<p>), mais les experts en XHTML te répondrons mieux que moi...

Il faut aussi enlever le border="0" dans ce cas

EDIT : Et surtout, partir de la racine du site : /new/img/... ou bien juste img/... sans le /

Perrine

Perrine

Posté
Posté (modifié)

En fait, pour faciliter (mais peut-être que ça t'a embrouillé, dsl dans ce cas), je n'ai fait qu'une image unique pour le haut de la page que je mets en fond de la div #page, #page englobant tout le contenu.

L'image de fond :

header.jpg

J'ai vu que tu avais supprimé ce div (#page), c'est pour ça que ton image a disparu et que le contenu est collé à gauche.

Si on décortique le div #page :

#page{
width:750px;  // largeur de 750 px
background:#FFFFFF url(img/header.jpg) top no-repeat; // image ci-dessus mise en fond, collée en haut
margin:0 auto; // on centre la page 
padding-top:160px; // un padding pour que le premier conteneur du div #page (ici le div #menu se situe à 160px de haut 
position:relative; // on positionne (même si ici ça ne change rien dans sa position) afin de pouvoir positionner en absolute le div #image
}

Maintenant, j'aurai aussi du expliquer le code suivant :

<h1 class="titre">Support informatique / Dépannage, formation, assemblage</h1>

h1.titre{
display:none;
}

Puisque le titre du site est affichée dans une image (celle que tu as remise dans le code HTML), j'ai souhaité tout de même faire apparaitre dans le code une balise h1 mais que je masque grâce au CSS. C'est une manière de titrer un document si la CSS est désactivée.

Le div #image est placée à la fin de la page HTML mais tu peux le mettre où tu veux. 

#image{
width:auto;
position:absolute;
top:55px;
left:360px;
}

A partir du moment où un bloc conteneur est placé en absolute, il est retiré du flux et se ballade comme un électron libre, qu'on place avec les attributs left et top dans ce cas.

---------------

Je viens de voir que tu es en XHTML 1.0, c'est peut être un peu "chaud" pour commencer... tu dois fermer la balise image comme ceci : />

Je ne trouve pas que ce soit beaucoup plus chaud. Le transitional reste assez souple. A vrai dire, et compte tenu des connaissances de michael, je lui conseille d'apprendre directement le XHTML plutot que le HTML :) D'ailleurs, un lien qui explique les différences entre XHTML et HTML, à lire absolument. Après ça, aucune raison de rester en HTML : Passer du HTML au XHTML

Modifié par Azon
Perrine

Perrine

Posté
Posté

Re michael :)

Je viens de voir que tu avais construit ta page depann.htm.

Les balises dl, dd et dt que tu utilises ne sont pas appropriées dans ce cas là. Ces balises servent à faire des listes de définition. Or, ici, tu présentes du texte qu'il suffit de mettre dans des balises <p>

Tu peux sans problème utiliser le squelette que j'ai construit et remplacer les titres et textes nécessaires, ce sera beaucoup plus propre ;)

Kimberlyclarko

Kimberlyclarko

Posté
Posté
Je ne trouve pas que ce soit beaucoup plus chaud. Le transitional reste assez souple. A vrai dire, et compte tenu des connaissances de michael, je lui conseille d'apprendre directement le XHTML plutot que le HTML smile.gif D'ailleurs, un lien qui explique les différences entre XHTML et HTML, à lire absolument. Après ça, aucune raison de rester en HTML : Passer du HTML au XHTML

tu as raison, c'est pas plus chaud que de commencer en HTML finalement... c'est toujours un peu laborieux au début (que ce soit en HTML ou XHTML), mais on s'y fait vite, autant commencer avec les bonnes bases ;)

michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

Je recommence tout du début.... Merci azon

Je commence à comprendre de plus en plus la puissance de ce code !!!! :o

Modifié par michaeljack
michaeljack

michaeljack

Posté
  • Auteur
Posté (modifié)

j'ai presque terminé... Toutes les pages sont créés sur le modèle de ton code....

Il ne me manque plus qu'à trouver le moyen de réinsérer les header de droite... ^_^

ps: quoique c'est pas mal comme ca, non? Qu'en pensez-vous?

Modifié par michaeljack
Perrine

Perrine

Posté
Posté

Bonjour michael :)

Quelle activité ce matin ;)

Je préfère avec l'image qui change sur chaque page. Sans ça, c'est un peu vide je trouve le haut de page.

Si tu veux l'intégrer, c'est ce code ci :

<img id="image" src="img/accueil.jpg" alt="illustration pour la page d'accueil"/>

et dans la feuille de style :

#image{
position:absolute;  //on sort l'image du flux, c'est à dire qu'elle devient un élément que l'on peut placer où l'on veut
top:55px; //l'image est positionnée à 55px du haut de son conteneur, ici le div #page
left:360px; // l'image est positionnée à 360px du côté gauche de son conteneur, toujours le div #page
}

Tu n'as plus qu'à changer le chemin de l'image sur chaque page ensuite ;)

Pense à compléter les balises meta keywords et description sur toutes tes pages.

Sur depannage.htm, il y a ça à 2 reprises : <p> </p>

Est ce que c'est pour faire apparaitre une ligne vide entre le titre et le texte ? Si c'est le cas, tu peux simplement intervenir sur la balise h2 dans la feuille de style :

h2{
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
color:#FF0000;
text-align:center;
padding:5px 0;
}

En ajoutant un margin-bottom, tu peux mettre un espace supplémentaire entre le titre h2 et le bloc suivant. En savoir plus sur les boites : Le modèle des boîtes.

Il te suffit donc de rajouter la ligne suivante :

margin-bottom:15px (par ex)

Ah et tant que j'y pense, j'avais fait un test pour espacer les paragraphes (mais uniquement dans le div #gauche), parce que je trouvais que les paragraphes étaient trop collés entre eux :

#gauche p{
padding-bottom:15px;
}

Je pense que tu peux généraliser à tous les paragraphes en mettant ce padding dans le 

p{
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.4;
}

Bon voilà, en vrac ^^ J'espère que la construction de pages en XHTML/CSS t'a plu ;) Perso, je m'amuse toujours autant héhé :P

michaeljack

michaeljack

Posté
  • Auteur
Posté

J'ai suivi toutes tes recommandations, et je t'en remercie encore.....

Cependant, le header de droite refuse de s'afficher correctement...

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
 Partager
Aller sur la liste des sujets
×
×
  • Créer...