Hello [smile] mon topic est destiné un peu plus aux "débutants" qu'aux experts, mais vous pouvez tous venir y piocher des idées... J'essaierai d'expliquer avec des mots simples certains concepts dont on voit très souvent les erreurs ici sur ce forum de pcastuces, et je vous engage à me contacter pour en rajouter si vous en avez d'autres à l'esprit ... Bref, Malcolm production présente : (tadammm)

les plus fréquentes erreurs lors de la création d'un site

vu que ce forum n'est pas prévu pour les codes sources et suite aux dernières mises à jour du forum, toute la mise en page de cet article a sauté.Vous retrouverez cet article sur mon site :

http://www.php-astux.info/articles.php?article=web

Table des matières 0- (Tout) Qui est qui ? serveur / client 1- (HTML / PHP) Erreur de noms de fichiers : Page 404 ? 2- (tout) Erreur d'upload 3- (HTML / PHP) Erreur dans les chemins 4- (HTML / PHP) Erreurs diverses (oublis) : metas, grossièretés, positionnement 5- (HTML / PHP) Scripts Java 6- (Site, Hebergeur) Bande Passante, Requête (hit) et Hébergeur 7- HTML, XHTML : généralités, doctypes, lequel choisir 8- CSS : intérêt ?

*0* Qui est qui ?

Beaucoup l'ont remarqué : lors du double clic sur un fichier dont l'extension est .htm ou .html, cela ouvre le navigateur internet et affiche une page internet. qu'en est-il pour les autres extensions ? Vous téléchargez un script php, ou un code javascript, que faut-il en faire ? Eh bien il faut savoir qu'il existe 2 types de langages : le langage serveur et le langage client Concrètement, le langage serveur est une sorte de html (donc de page web classique) avec des portions de code en plus, page qui sera traduite par le serveur en html simple. Un ordinateur de visiteur ne peut pas lire le langage serveur (sauf à une condition, que je préciserai après). En comparaison, c'est comme un minerai "brut", que le "serveur" nettoie et renvoie "net", en sachant que seul le net intéresse les gens (ce qui est valable aussi dans ce topic, mais ne commençons pas les jeux de mots je vous prie [bigsmile]) Le langage client est un langage simple, "net" (pour reprendre ma comparaison précédente) qui passe tout de même par le serveur, si ce n'est que celui-ci n'a pas à y mettre son grain de sel. voici un exemple typiquement schématique, pas de langage à proprement dit, mais du pseudo-code : langage serveur :

en code : si le visiteur clique sur "FR" => alors langue = française envoyer le fichier french.htm sinon envoyer english.htm

le serveur renvoie : french.htm ou bien english.htm selon ce que le visiteur a choisi comme langue. Ainsi, le visiteur ne verra que 50 % des fichiers du site, mais qu'il soit anglais ou français n'aura, au point de vue du code des pages que le serveur lui enverra, presque aucune différence... langage client:

dans le code source du site : si le visiteur clique sur l'image fleur => appeler la photo de martin si le visiteur clique sur l'image souris => appeler pcastuces

le serveur renvoie 2 liens : l'un sur une image de fleur, l'autre sur une image de souris. Vous l'aurez compris, le langage serveur, une fois traduit par le serveur, n'est plus qu'un langage simple ... alors que le langage client passe tout de même par le serveur mais n'est pas retraduit, puisque déjà simplifié. Mais quel avantage de passer par un serveur ? C'est très simple : l'avantage, ou plutôt les avantages sont la sécurité (garder un mot de passe, ou un n° de carte bancaire confidentiel par exemple), mais aussi pour un forum : en effet, si j'envoie mon message sur l'ordinateur de Clément, Thomas ne saura pas que j'ai écrit quelque chose... D'où l'idée de faire un point central... Qui permettra à Polo d'y jeter un oeil. (et accessoirement de comprendre [bigsmile] non je plaisante Polo) ou encore un compteur de visites, etc... un formulaire de vente en ligne, tout ça se traite par un serveur. et par rapport aux extensions ? Le langage client d'une machine est l'html. C'est un langage de mise en page simple qui est compris par le navigateur du client (le client = la personne qui visite le site). Le serveur auquel il se connecte lui envoie des fichiers, dont l'extension est html, php, abc, peu importe, mais tous ces fichiers ont été traités par le serveur pour être traduits en html. Soit le fichier "source" est déjà en html, auquel cas le serveur n'a rien à faire, soit il ne l'est pas (php, asp) et il doit le traiter pour renvoyer un fichier php qui ne contienne que du code html dedans. Le javascript est un langage client, également : le serveur ne s'en occupe pas, c'est sur le pc du client que le javascript est exécuté. par exemple, c'est pour cela que la commande pour imprimer une page existe en javascript et non en php : en effet, le serveur ne connait rien aux imprimantes installées sur le pc d'un client, alors que le javascript, lui, étant exécuté chez le client, peut trouver ce genre d'information en résumé: htm, html => directement lisibles sur un ordinateur client js => à intégrer dans le code source d'un html, mais directement lisible aussi sur un ordinateur client php, asp => nécessite qu'un serveur s'interpose pour recompiler le code en html. j'ai dit plus haut qu'un ordinateur client pouvait lire des php, à une exception, que voici : il suffit sur le pc d'émuler un serveur web, et de lui faire lire les fichiers PHP. Concrètement, cela se passe avec EasyPHP par exemple (Apache est le plus connu) et vous trouverez une méthode un peu plus détaillée ici : http://gadgetip.free.fr/easy6.php

*1* Erreurs de noms de fichiers : page 404 ? Voilà une erreur faite très facilement ... En effet, quoi de plus désolant de trouver, lors d'un clic sur un lien, une fameuse page 404 ... qui indique que le fichier n'a pas été trouvé, alors que vous êtes sûr de l'avoir mis et envoyé sur le serveur... il existe 5 pistes à vérifier pour que les liens soient bons :

1- evitez de mettre des majuscules ! en effet, la plupart des serveurs qui hébergent des pages web ne sont pas sous Windows, mais sous Linux, et, à la différence de Windows, Linux fait la différence entre un fichier nommé "Index.htm" et "index.htm". Conseil : nommez tous vos fichiers avec des lettres minuscules.
2- Evitez les caractères accentués ! en effet, une page avec un caractère accentué risque de provoquer un lien "bizarre", s'il est réencodé... en effet, le "é" par exemple, en html se note & eacute; donc un lien vers une page avec un "é" dedans risque à coup presque sûr de générer une erreur, à moins que vous maniiez très bien les noms avec des caractères accentués
3- Evitez les caractères que je qualifierais d'"exotiques" ! : ne mettez ni d'espace, ni de point d'exclamation, ou d'interrogation dans un nom de fichier. En effet, en html un espace se code %20, donc un lien vers page toto.html serait interprété comme page%20toto.html, ce qui peut générer des erreurs de liens. Pour éviter les espaces, privilégiez le trait d'union (-) ou le underscore (_)
4- le fichier est-il uploadé ? voyez le paragraphe §2 juste après.
5- une erreur de lien, tout simplement : voyez la partie §3 "chemins relatifs et absolus"

Si vous avez ces 5 pistes de liens validées, alors il ne devrait pas y avoir d'erreur de type 404 sur votre site... A noter qu'un site dont la plupart des pages donnent accès à la fameuse 404 n'est pas franchement motivant pour une visite ultérieure...

*2* Erreurs d'upload Qu'est-ce que l'upload ? C'est traduit en français par téléchargement. Oui, la langue française emploie ce mot "téléchargement" pour exprimer le fait qu'un fichier soit copié d'une machine à l'autre, sans plus de distinction. L'anglais, lui, discerne 2 sens : l'upload et le download. Lorsqu'on prend une machine pour point de référence, un upload correspond à toutes les infos que cette machine envoie vers les autres. Un download exprime tout ce qu'elle reçoit des autres (par demande ou par upload des autres). Uploader un site, c'est se connecter à un serveur par un accès, généralement le FTP (File Transfert Protocol). On utilise un logiciel "client FTP" comme FlashFXP (payant), FTP Expert (payant), FileZilla (gratuit) ou encore LeechFTP (gratuit) On utilise une adresse FTP : très souvent, c'est ftp.hébergeur.extension, par exemple : --> pour Free : ftpperso.free.fr --> pour Wanadoo : perso-ftp.wanadoo.fr on utilise un login et un mot de passe fournis par l'hébergeur et enfin un port, dans la plupart des cas valant 21. Un logiciel client FTP présente en général 2 colonnes, une pour le disque dur de la machine sur laquelle vous travaillez, l'autre pour montrer le disque dur qui est attribué à votre login sur le serveur. Un upload de site correspond simplement à la copie des fichiers depuis votre disque dur vers le serveur... Si vous oubliez un fichier, votre site fonctionnera tout de même ... Mais lorsqu'un visiteur voudra ouvrir la page présentée par ce fichier, il tombera sur unr erreur type 404 "page inexistante" Attention : si vous oubliez de mettre un fichier index.htm dans un dossier, le visiteur verra la liste des fichiers de ce dossier. De même, notez que les serveurs étant sous Linux (ou une des distributions), pour se balader dans les dossiers, on utilise le signe "Slash" noté "/" et non le "backslash" comme dans windows noté "\"

*3* Erreurs dans les chemins Voilà une erreur qui arrive très fréquemment, lorsqu'on débute en sites web et qui arrive encore lorsqu'on est déjà "confirmé". D'abord, pour les débutants, je vais définir le chemin Un chemin est un code qui correspond à une arborescence (donc des dossiers, comme sur le disque dur) pour permettre de relier 2 objets : 2 fichiers, 1 fichier 1 image, 2 images, 1 fichier 1 musique, etc... On parle aussi d'URL (Uniform Resource Locator) Il existe 2 types de chemins :

le chemin relatif
le chemin absolu

commençons par le relatif Pour bien définir le chemin relatif, Eric, mettons-nous en situation. [bigsmile] La situation, Eric, est la suivante: vous êtes dans un immeuble de plusieurs étages, chaque étage contenant des appartements qui eux mêmes contiennent des pièces. (j'arrête là mon // avec Eric et Ramzy lol) Vous l'aurez peut être compris, les étages de l'immeuble correspondent à des niveaux de l'arborescence (des gros dossiers), les appartements correspondent à des sous dossiers et les pièces à des fichiers. Voilà un exemple d'arborescence de site illustrant ce propos (et avec les couleurs SVP [smile])

Chaque dossier peut contenir zéro, un ou plusieurs sous dossiers, ainsi que zéro, un ou plusieurs fichiers Il en est de même pour les sous dossiers, ceci exactement comme pour votre disque dur. J'ai choisi ici de ne pas mettre de sous dossier dans l'étage 3. L'étage 0 contient, hormis les 3 sous dossiers "etage1","etage2","etage3" un fichier index.html Supposons que le visiteur ait actuellement la page index.html affichée. Un lien sur lequel il a cliqué doit ouvrir le fichier1.html le code à créer doit donc dire :

tu es dans index.html, contenu dans "etage0" -> ouvre le dossier "etage1", sous dossier de "etage0"; -> dans "etage1" tu ouvres "appartement1" (que tu ouvriras aussi) -> et là tu trouveras le fichier1.html

le code à créer pour ouvrir un sous dossier est de mettre "nomdudossier/" par exemple, "etage1/" ouvrira le dossier "etage1", dossier fils direct de etageO de même pour appartement1, et on accède au fichier1.html :

dans index.html, le code pour accéder à fichier1.html est : etage1/appartement1/fichier1.html

le lien html sera donc : Fichier 1 Là, nous avons "descendu" dans l'arborescence, en ouvrant à chaque fois des sous dossiers. Il existe bien entendu un moyen de remonter, noté "../" Encore une fois, Eric, mettons-nous en situation : je suis dans fichier3.html et je désire accéder à fichier2.html il faut dire au serveur :

tu es dans fichier3.html, contenu dans etage3. -> tu dois remonter d'un dossier (tu seras alors dans etage0, mais c'est sous entendu) -> tu dois redescendre dans etage2 -> là tu auras le fichier2.html

le code à créer pour ouvrir un dossier dit "parent" est de mettre "../nomdudossier/" par exemple, "../" ouvrira le dossier "etage0" qui est le parent direct de etage3 et on accède au fichier2.html :

dans fichier3.html, le code pour accéder à fichier2.html est : ../etage2/appartement2/fichier2.html

le lien html sera donc : Fichier 2 Voici donc les liens relatifs, c.à.d. des liens qui partent d'un fichier source pour aller vers un fichier cible, en remontant dans les dossiers parent et en descendant dans les dossiers enfants. Bien entendu, pour ouvrir un fichier voisin (supposons index_bis.html, voisin de index.html) il suffit de mettre Index Bis. et maintenant l'absolu : C'est beaucoup plus simple. Ce style de lien donne le chemin complet du fichier depuis la racine du serveur (que j'ai précédemment appelée etage0) par exemple, le chemin absolu de index.html est http: //www .site.com/index.html le chemin absolu de fichier1.html est http: //www .site.com/etage1/appartement1/fichier1.html ici on donne tout le détail de l'arborescence. Avantage : on est sûr de ne pas se tromper en oubliant des ../ ou des /dossier/ inconvénient : si on décide de déplacer le site (changement de site.com par toto.com) tous les liens sont à rééditer... Une erreur classique dans les liens souvent faite par ceux qui débutent est de ne pas se rendre compte que les liens dans leur site sont absolus et pointent vers le disque dur. Ex : un lien file :///C/program%files/dossier%20web/index.html Ce lien ne marchera pas, car le serveur n'aura pas accès à ce fichier... (heureusement sinon on aurait acès à votre disque dur n'importe comment !) Solution : déclarer un site dans le logiciel (Fichier / Nouveau / Site Web en général) pour que le logiciel comprenne que, dans mon exemple, dossier%20web sera la racine de mon futur site (etage0) psiiit : vous avez vu ? j'ai mis volontairement un nom avec des espaces pour vous montrer que c'est pas facilement lisible...

j'ai cité récemment un exemple de différence entre l'absolu et le relatif que j'ai jugé bon de rajouter ici... Cela vous aidera peut être mieux à cerner au cas où un doute subsisterait ... L'exemple est le suivant. Je reprends mon immeuble, avec des étages, des portes à chaque étage. parler de chemin absolu c'est dire le n° de la porte en partant de la toute première porte (concierge) pour point de référence... par exemple, concierge = porte zéro, puis le rez-de-chaussée ayant 10 personnes qui y vivent, la porte n° 11 sera au premier étage. parler de chemin relatif, c'est partir avec un point de référence local, et non global. En gros, chaque étage a sa première porte, sa 2ème porte... Pour finaliser mon exemple, en absolu : Thomas qui habite à la porte n°53... ...en relatif donnera : Thomas habite au 5ème étage, 3ème porte. dans un cas (absolu), on est sûr de ne pas se tromper. Sûr et certain. Mais le hic c'est que tous les immeubles n'ont pas forcément de 5ème étage... dans l'autre, bien que presque tous les 5èmes étages habités aient une 3ème porte (si on suppose au minimum 3 habitants distincts), on peut transporter le raisonnement d'un immeuble à l'autre (très facile), mais il faut s'assurer que c'est bien la 3ème porte. Voilà pour mon exemple. Plus clair ? pareil ? mieux avec le texte seul ..? je ne sais pas... ça a aidé des gens, peut être vous également.

*4* Erreurs diverses (oublis) : metas, grossièretés, positionnement - sur le fond et sur la forme Dans ce bout de paragraphe, je vais mettre une liste non exhaustive des erreurs plus ou moins importantes pour le site, qui pourront altérer son affichage de manière plus ou moins significative. 1ere remarque : beaucoup de gens qui débutent mettent des fichiers très gros dans leur site. Une photo, une musique de fond. (Hormis les noms qui ne respectent pas toujours les règles enoncées ci dessus), ces fichiers, lourds de plusieurs mégaoctets, prennent un temps fou à télécharger. Ils ne s'en rendent pas compte car l'affichage sur leur disque dur est quasi immédiat... Mais ceux qui ont un modem 56k le sentent ! Pour donner une idée d'ordre de grandeur, les 56k téléchargent à 5 ko/sec (quand le serveur est bon) soit une musique de 1 Mo (1 Mo = 1024 ko) prendra plus de 200 secondes, soit plus de 3 minutes, et ceci rien que pour la musique ... Après restent les textes, les images, etc... Les photos, c'est pareil... Solution : bien que l'idéal étant de ne pas mettre de musique du tout, essayez de ne mettre que des fichiers MIDI (extension .mid) : un fichier de 60 ko prendra 12 secondes de téléchargement. Mettez des vignettes des photos. Comme pour une galerie photo, réduisez votre photo à l'aide d'un logiciel de retouche d'image pour générer la même, mais en plus petit. Faites un lien dessus vers la grande photo. (N'oubliez pas d'uploader tous les fichiers sur le serveur !) attention au copyright des musiques... 2ème remarque : Mettez un titre à votre page... Le titre se situe dans le code entre les balises </b> et <b> pour ceux qui voudront référencer leur site, je vous engage à lire mon article http://gadgetip.free.fr/referencement.php 3ème remarque : Corrigez vos fautes d'orthographe ... Actuellement, j'estime que la majorité des utilisateurs ont un correcteur d'orthographe, ce n'est pas compliqué de passer le texte dessus ... Et un site bourré de fautes d'orthographe ne sera pas vraiment visité... Si vous avez des doutes sur l'écriture d'un mot, [url="http://forum.hardware.fr/forum2.php3?config=hardwarefr.inc&post=19265&cat=13&cache=&sondage=0&owntopic=0&p=1&trash=0&subcat"]n'hésitez pas à lire ce topic, très complet[/url] 4ème remarque : Faites attention au code source : internet explorer, même s'il est le navigateur le plus répandu, ne respecte pas les normes du code HTML. Il les reconnait pour la plupart, mais il en reconnait beaucoup d'autres, non validées, ce qui peut paraitre bizarre... Lisez, pour un peu plus d'infos, ce sujet : https://forum.pcastuces.com/sujet.asp?SUJET_ID=125994 dans lequel l'ami koala a qq soucis [langue] Explication : supposons que vous mettiez dans votre page un code. par exemple texte vous affichera texte (en gras) Il y a des navigateurs qui ne reconnaitront pas cette balise... (ce n'est pas le cas pour , mais pour par exemple) et l'affichage du site devient alors dépendant du navigateur du client... Evitez les surprises en n'utilisant qu'un code source générique, qui est compatible partout ... Pour vérifier que votre site est bien écrit au pooint de vue du code source, il existe le W3C Validator : http://validator.w3.org/ Il vous indiquera les erreurs, corrigez-les et vous serez sûr que votre site s'affichera exactement pareil quelque soit le navigateur du client (internet explorer, netscape mozilla, firefox, etc...) Vous aurez droit à un joli petit bouton comme en bas de mon site d'anatomie ... [approuve] 5ème remarque : la mise en page. Pensez que le visiteur n'a pas forcément le même ecran que vous ... Si vous travaillez sur du 1024 x 768, alors il y a de grandes chances, mais les 3 principales résolutions sont 1024 x 768, 800 x 600 et 1280 x 1024. Toutes les 3 ont des dispositions différentes ... (forcément) aussi ne calquez pas votre site sur une photo en 1280 x 1024, sinon ceux qui iront dessus en 800 x 600 auront de longs ascenseurs, horizontaux comme verticaux. Solution : utilisez des % qui se redimensionnent automatiquement selon la résolution d'écran, des styles CSS par exemple. *5* Scripts Java Qu'est-ce que c'est ? c'est un bout de code qui s'insère dans une page html (mais aussi dans une php) qui permet d'avoir une fonction d'animation sur le pc du visiteur. Ce code est traduit par la machine du client, donc il doit avoir la machine JAVA installée. Voyez un exemple : www.coursanatomie.info, en dessous de ma bannière il y a un menu. Un script java permet de faire des animations de textes, d'images de cet ordre. Comment le mettre en place ? La page HTML se découpe en 2 blocs principaux : ... pour la tête de page ... pour le corps de la page. La tête de page est exécutée par le navigateur, le corps est ce qui est visible à l'écran pour le visiteur. Un script java peut avoir un morceau de code à 3 endroits différents :

dans le
dans le tag
dans le

dans le head : copiez le morceau de code entre et Exemple :

titre de page ...

dans le tag body : souvent couplé à uine copie dans le head, il faut un morceau de code dans la balise comme suit: Exemple :

titre de page onload="effet_javascript"> ...

attention, ce n'est pas toujours un "onload" ... La partie à mettre dans le tag body vous est précisée par le créateur du script. dans le body : parfois couplé aux 2 précédentes insertions, parfois seul, parfois avec une insertion simple dans le head. Pour l'exemple suivant, je montre les 3 à la fois, mais la violette illustre ce point du paragraphe : Exemple :

titre de page onload="effet_javascript"> ... ...

Attention à la compatibilité ... Il existe de très beaux effets javascripts, qui ne sont lisibles que sous un certain navigateur, Internet explorer. Mais pensez un instant que d'une part tous vos visiteurs ne sont pas forcément sous Internet explorer, et que d'autre part, quand bien même ils le seraient, ils n'ont pas forcément la dernière version ... (la 5 étant livrée avec windows 98) D'autre part, il n'est pas exclu que certains surfeurs désactivent chez eux le javascript, ou bien ne l'installent pas... C'est un compromis à choisir... Derniers points auxquels il faut penser : les ressources et l'utilité. S'il vous prend l'envie de mettre des flocons de neige qui tombent sur votre page pour Noël, pourquoi pas, mais faites attention à ce que ça ne ralentisse pas trop l'ordinateur, les scripts de ce genre étant très gourmands en ressources. D'autre part, mettre un javascript pour voir une horloge qui suit le curseur, est-ce vraiment utile sachant que j'ai une horloge dans la barre des tâches de Windows ? Comme disent 2 comiques, "c'est vous qui voyez ..."[smile] il y en a qui ont essayé, ils ont eu des problèmes, cela dit, il est très rapide pour les désireux de la citation complète [bigsmile] Ressources javascripts : regardez sur Google... recherchez "javascripts", "texte défilant javascript", javascript sur un lien", etc... *6* Bande Passante, Requête (hit) et Hébergeur J'ai donné dans un récent topic une explication de la bande passante, des limitations de requêtes sur un serveur qu'ilme semble judicieux de rajouter dans ce topic. Concrètement, de quoi s'agit-il dans cette partie ? Il s'agit de définir ce que l'hébergeur vous donne comme permissions, dans la globalité. Hébergement : l'offre L'offre d'hébergement est de 2 types. Payante ou gratuite. (voir le topic [url="https://forum.pcastuces.com/sujet.asp?SUJET_ID=110146"]Liste offres hebergements[/url] de Ti_Ouf) L'offre se décline en plusieurs paramètres :

1. l'espace de stockage. Il s'exprime en général en méga octets, c'est un espace qui vous est réservé. Vous pouvez y stocker ce que vous voulez comme fichiers, que ce soit des html, des mp3, des avi, des doc, des zip ... Un peu comme une clé USB, mais sur internet. La connexion à cet espace se fait par un client FTP, voir le §2 "Upload"
2. Base de données ? Parfois, on vous propose une base de données. A quoi cela correspond-t-il ? Je ne vais pas trop rentrer dans les détails, puisque mon topic se veut simple... Imaginez donc un document créé avec Microsoft Excel : vous avez, par défaut, 3 feuilles, chacune étant composée de lignes et de colonnes (256 colonnes par 65 536 lignes). La base de données est exactement comme cela... Si ce n'est que c'est pas un format "excel", mais elle présente des informations, regroupées en tables (les feuilles d'excel), chaque table étant composée de champs qui sont disposés en colonnes (les colonnes d'excel). La table contient des enregistrements. Chaque enregistrement est un ensemble de valeurs qui sont enregistrées respectivement dans les champs... Prenons l'exemple d'une table "amis". A chaque "ami", je demanderai ses nom, prénom, age, adresse postale, adresse mail. La table sera donc "Amis". Les champs seront "nom, prénom, age, adresse postale, adresse mail" et un enregistrement = un ami ... Par exemple "Malcolm / 23 ans / Rouen ..." Quel est l'intérêt ? Il ne s'agit pas seulement de traiter des commandes, factures et clients, mais aussi créer des moteurs de recherches ...
3. Webmail Le Webmail est un service qui se compose, pour un nom de site (URL) d'une adresse mail associée. Par exemple, "baptiste @ pcastuces.com" Selon les offres, il y a 1, 5, 10 ... adresses mails possibles. Les hébergements gratuits n'ont pas ce genre de proposition (1 adresse au plus en général)
4. Nom de domaine C'est un nom avec une extension, qui permettra d'accéder au site. Pcastuces.com est un nom de domaine. Les hébergements payants proposent en général un nom en .com, org, net, biz... info aussi... Les gratuits non : ils ont leur nom avec le login du client très souvent (exemple : http: // multimania.lycos.com / toto/ pour le nom de domaine de toto) Il est possible d'acheter un nom en .com avec un hébergement gratuit... Le nom en .com redirigera simplement le visiteur sur http:// multimania... / toto (c'est vous qui le définissez)
5. Sous domaines C'est en général les grosses offres qui proposent ce genre d'option. Pour un nom de domaine, cela permet d'avoir un nom dérivé pour appeler directement une autre page du site... par exemple, forum.pcastuces.com est un sous domaine de pcastuces.com (il y a pcastuces.com en commun)
6. Langages, fonctions Les hébergeurs gratuits ne proposent pas tous la même chose. Certains ne proposent pas le php (wanadoo par exemple), d'autre oui (Free par exemple) Regardez ce qui vous est proposé dans l'offre.

L'offre stipule en outre les termes de "bande passante", de "requêtes" (ou hits). Pour ceux qui ne sont pas très familiers avec ces notions, je vais les expliquer ici : La bande passante en général

La bande passante, appelée également débit est la quantité maximale d'éléments passant dans une section par unité de temps. [bigsmile] voilà pour la définition générale. ça s'applique à l'éléctronique, mais aussi à la mer, aux voitures sur l'autoroute... bien que dans ces derniers cas on parle de débit et non de "bande passante", mais le principe reste le même. En informatique, la bande passante s'exrime en générale en kilobits/seconde, que l'on peut aisément convertir en kilooctets/secondes : il suffit de savoir que 1 octet = 8 bits et donc la division du nombre de kilobits (noté kb) par 8 donnera l'équivalent en kilooctets (ko ou kB en anglais, B pour Byte) en anglais, tant que j'y suis : 1 octet se dit 1 Byte, noté B (B majuscule) 1 bit se dit 1 bit [bigsmile] noté b (b minuscule) Après, en informatique, il existe 2 bandes passantes; la théorique et la pratique. La théorique se calcule par la puissance maximale de la ligne (réseau, internet, bus système ...) alors que la pratique est l'application concrète. Je prends un exemple : une connexion 56k = 56 kilobits/sec = 7 kilo octets / seconde. en théorie. en pratique, cette connexion donnera du 5 ou 6 kilo octets par secondes. Pour donner un exemple plus général, il suffit de comparer la bande passante à une autoroute où les informations seraient des voitures. L'autoroute a une largeur, exprimée en nombre de voies : 2 voies, 3 ou 4 voies. (j'ai jamais vu 5 encore :p) En mettant 4 voitures ensemble, elles peuvent être une sur chaque voie par exemple. Ce qui implique que chacune peut avancer à la vitesse qu'elle veut, puisque personne ne la dérange devant (tout code de la coute mis de coté) alors que s'il n'y a qu'une voie, c'est la première des 4 voitures qui limite les 3 autres (à moins de doubler, ce que les informations électroniques ne feront jamais)

coté internet, chez soi

Elle est tributaire d'un forfait internet. Elle n'augmente ou diminue que selon sa capacité. Par exemple, l'adsl 1 mega signifie 1 mega en réception. Pour faire augmenter ou diminuer la bande passante en tant que telle, il faut changer de forfait. maintenant concernant l'occupation de la bande passante, vis à vis d'internet, c'est tout ce qui est téléchargé qui en est responsable. Il y a l'émission (upload) et la réception (download) qui sont traduites toutes les 2 dans un seul mot français : le téléchargement. (c'est pour ça que je préfère les termes anglais, qui distinguent un sens) pour les upload : en général c'est l'envoi de mails, les logiciels p2p (emule, kazaa et Cie), msn, antivirus ... webcam sur chat ... jeu sur internet ... pour les download : msn, antivirus, réception de mails, mises à jour de logiciels ... navigation sur internet ... ceci est valable à condition que lesdits logiciels soient chargés en mémoire ... la réception de mails ne prendra rien si outlook ou aucun client messagerie n'est ouvert !

coté serveur et hébergement la bande passante, c'est dans le cas de l'hébergement la taille totale de ce que le(s) visiteur(s) va(vont) télécharger : visite d'une page = --> page html --> images de fond, des boutons... --> bannières éventuelles --> musiques éventuelles --> divers : animations JAVA, flash... --> éventuellement un fichier proposé à télécharger : pdf, zip ... donc, pour une seule page de site, on fait l'addition des tailles en ko de tous les éléments cités ci dessus, et on obtient la taille de bande passante requise pour voir cette page. En sachant que, pour l'exemple du zip proposé à télécharger, ce n'est que lorsque le visiteur demande par un clic sur un lien, à recevoir le zip, que l'espace correspondant est demandé... prenons un exemple : une page html simple, avec tous les éléments cités ci dessus : - fichier htm : 10 ko (dont le texte écrit sur la page) - banniere.gif : 25 ko - fond.jpg : 0.5 ko - bouton1.gif : 2 ko - bouton2.gif : 2 ko - bouton3.gif : 2 ko - pdf proposé en parallèle : 150 ko - zip proposé en parallèle : 2 Mo pour voir cette page, le navigateur du visiteur demande au serveur de lui uploader : - fichier.htm - la banniere.gif - le fond.jpg - les 3 boutons le pdf et le zip ne seront uploadés que si le visiteur les demande. Bande passante utilisée : 10 + 25 + 2*3 + 0.5 = 41.5 ko Si jamais je clique sur le lien du ZIP, 2 Mo seront utilisés après. Les requêtes (hits) Elles sont parfois limitées sur certains hébergeurs. qu'est-ce qu'une requête ? c'est une demande de truc [bigsmile] on va aller loin avec ça. Pour reprendre mon exemple précédent de la page, lorsque je tombe dessus, mon navigateur demande : - fichier.htm - la banniere.gif - le fond.jpg - les 3 boutons soit 1 + 1 + 1 + 3 = 6 éléments. Cela fait 6 requêtes. Une requête n'est pas limitée en taille, c'est simplement le fait de demander qqch au serveur. Si je clique sur le lien pour avoir le PDF, cela fera une requête en plus. Comment réduire l'utilisation de la bande passante ? en faisant télécharger le moins de trucs possibles au visiteur. Par exemple, au lieu d'écrire dans le code html : Salut les amis ! on peut créer un style CSS qui reprendra la police, la taille et la couleur :

.style_orange { color:#FF6600; font-size:12pt; font-family:"Times New Roman" }

et l'appeler de la manière suivante :

Salut les amis !

Pour une seule fois ... c'est pas nécessaire de créer un style CSS... Mais avec un site de 300 pages, on sent vraiment la différence !!! car je pense que vous avez un téléphone portable ... comme plus de 50% des gens lors de la rédaction d'un télémessage, le nombre de caractères est important ... Eh bien là c'est pareil. Autre moyen d'alléger l'occupation de la bande passante : en optimisant les images. Par exemple, une image qui n'est composée que de 5 ou 6 couleurs principales, la passer en format GIF au lieu de la garder en bmp, 24 bits. Pas trop de fioritures... Je parlais plus haut dans ce topic d'une horloge en javascript qui suit le curseur, par exemple... ou un compteur de visites... qui, entre nous soit dit, lorsqu'il affiche "vous êtes le 3ème visiteur", n'incite pas spécialement à revenir... Je considères les compteurs comme inutiles, car reflets de la satisfaction personnelle du webmaster. Ce genre de données statistiques ne sert qu'à lui, pourquoi chercher à le montrer ? (mais à chacun sa façon de voir les choses) Est-ce vraiment si important ? Cela dépend des hébergeurs... Certains mettent un quota limite, en bande passante ou en hits. Lors d'un dépassement, une facturation supplémentaire est demandée au titulaire de l'espace web. (certains hébergeurs payants, mais c'est marqué dans le détail de l'offre) L'importance, jugez-la par vous-même... le site concurrent n'est qu'à quelques clics de souris, et une page trop grosse risque de faire fuir les visiteurs... *7* HTML, XHTML Généralités sur l'HTML HTML est un langage, ou plutôt une sorte de convention d'écriture présentant du texte dans différentes pages liées par des liens. Ces liens sont dits "hypertextes", ils sont écrits dans le code source. L'HTML (Hyper Text Markup Language) se présente par du texte délimité par des balises, elles mêmes avec des attributs (ou propriétés) et une valeur pour chaque attribut si nécessaire encadrée par des guillemets doubles. On distingue 2 sortes de balises : les balises ayant une fermeture et celles n'en n'ayant pas. Pour délimiter du texte, il faut en effet une balise ouvrante et une balise fermante. Les balises sont notées entre chevrons, < et >. La fermeture fait précéder le nom de la balise par un / exemples : Balises avec fermeture

texte

titre

coucou Waouh, c'est gros ! du bleu ... Balises sans fermeture

Enchainement des balises C'est un peu le principe des poupées russes : les premières ouvertes doivent être les premières fermées, autrement on est confronté à des balises chevauchantes ... exemple :

...

(texte en gras, italique, souligné dans un paragraphe) autre exemple :

...
...
...

(liste à puces) Dans le 2ème exemple, il n'y a pas 2

consécutifs. Chaque

est fermé avant d'ouvrir le

suivant. Composition d'une page HTML elle se compose en général comme ceci

doctype (cd. § suivant) Titre de la page <... d'autres balises metas ici> (cf §charset plus loin) -- ici le corps de la page, ce qui est censé s'afficher dans le navigateur --

Explication des différentes zones. (ouais, un peu d'anatomie [bigsmile]) HTML : le doctype Qu'est-ce qu'un doctype ? C'est une sorte de définition de page qui va indiquer au navigateur à quel genre de texte il va avoir affaire... Il existe, en HTML, 3 doctypes : respectivement un strict, un transitional et un frameset. Lequel choisir ? le strict est plus rigoureux que le transitional, il implique dont un codage plus "propre". Le frameset est destiné aux pages de cadres. Le charset : à quoi sert-il ? il existe une multitude de charsets (traduisez "jeu de caractères") qui sont en qq sorte une bibliothèque de caractères. Le plus commun pour les français est le latin1 ou ISO-8859-1. Il a posé un problème il y a quelques années, parce qu'il ne contient pas le signe de l'euro ... Une extension a été créée, l'iso-8859-15 (latin9) qui contient l'euro (ainsi que le oe de coeur qui n'était pas présent dans le 8859-1) Le charset Windows est le 1252, c'est celui que génère Frontpage en général. (il doit y avoir un moyen de le changer par défaut) C'est le charset Windows, propre à Windows. Une page codée sous ce charset ne signifiera pas qu'elle soit reproduite exactement de la même manière si elle est lue sous un autre système d'exploitation. Il en existe bien d'autres : le charset UTF8, l'UTF16 . Quel est l'intérêt d'un charset ? Imaginez que votre navigateur lise une page russe ... Sur un charset occidental (je sous entends latin1), la plupart des caractères ne seront pas présents, et remplacés par d'autres caractères. ça donnera un affichage de la page complètement désorganisé. Dans le navigateur, il est possible de faire menu Affichage > Codage (encodage des caractères) pour changer le charset. En outre, il existe les entités HTML, qui sont une traduction en "caractères de base" de caractères spéciaux. c.à.d. qu'elles transforment une lettre (accentuée, par exemple) en une série d'autres lettres non accentuées. Je cite les plus courantes, elles commencent par un & , suivi de la lettre dont il est question, puis la traduction de la spécialité du caractère terminée par un point virgule (enlever l'étoile, je la mets pour que le forum n'interprète pas)

acute; correspond à l'accent aigu grave; correspond à l'accent grave circ; correspond à l'accent circonflexe. <= valable pour toutes les lettres de l'alphabet, aussi bien minuscules que majuscules.=> Après tu n'as plus qu'à mettre un "&" puis une lettre (majuscule ou miniscule) puis l'accent ... par exemple : & E acute; (sans les espaces) pour faire un é majuscule. Après qq caractères plus "exotiques" ont un encodage, par exemple (tjrs sans les espaces) : ç => & c cedil; € => & euro; oe (coeur) => & oe lig; ñ => &n tilde; aussi des signes de ponctuation : ... => & hellip; etc ...

Voir plus de symboles : http://fr.selfhtml.org/html/reference/signes.htm (merci Elle pour le lien) L'avantage d'écrire selon cette forme est d'avoir un code source HTML exempt de caractères spéciaux. (on pourrait, à la rigueur, presque se passer de charset ...) Link CSS CSS (Cascading Style Sheet) fera l'objet du gros paragraphe suivant. Cette ligne sert juste à appeler une page CSS dsans le fichier HTML en cours. Insertion de javascript ceci permet de déclarer des fonctions javascript dans une page. Et l'XHTML ? XHTML est le "successeur" de l'HTML. C'est une sorte d'évolution de l'HTML. D'aucuns parlent d'HTML 5, ma foi pourquoi pas. Le X veut dire... (non, non ... [bigsmile]) eXtended [dent]. Le XHTML permet en fait de déclarer un document à mi chemin entre l'HTML (puisqu'il y a toujours des balises, même si quelques particularités détaillées plus loin existent) et l' XML (eXtensible Markup Language) En XHTML 1.0, il y a aussi 3 doctypes : Pareil à l'HTML, la rigueur demandée est plus grande en strict qu'en transitional (qui permet, justement, d'effectuer une transition). Le frameset est réservé pour les pages de cadres. Les particularités par rapport à l'HTML sont les suivantes : - Toutes les balises ouvertent doivent être fermées. - Toutes les balises et leurs attributs doivent être en minuscules. - Les attributs ne peuvent plus être minimalisés. - Les guillemets autour des valeurs d'attributs sont obligatoires. - Les balises propriétaires ne sont pas autorisées. - Les attributs et éléments de présentation sont interdits. Pour les balises sans fermeture, on les termine par />, c'est le cas de :

entres autres... Là où l'HTML permet d'écrire Dois-je être obligatoirement en XHTML 1.0 ? Oui et non. On peut très bien faire un document en HTML strict tout aussi valide sémantiquement parlant et qui soit tout aussi fonctionnel. Le choix de l'XHTML est un choix à évolutivité, car on peut y inclure de l'XML. Si votre site est en HTML, le passer en XHTML n'apportera rien de plus si, sur le plan sémantique, l'HTML était rigoureusement écrit. Il peut être intéressant, dans le cas d'une mise à jour, de passer en XHTML 1.0, pourquoi pas ... Mais ça peut impliquer du boulot. Quoiqu'il en soit, il ne faut absolument pas croire que l'XHTML est plus écrit avec du CSS que l'HTML, que l'XHTML c'est la séparation de la mise en forme du contenu, etc ... : c'est faux, on peut tout aussi bien (et on se devrait de le faire, même !) le faire ne HTML ... infos complémentaires : http://openweb.eu.org/articles/html_au_xhtml/ http://css.alsacreations.com *8* CSS 3 lettres cachent un concept assez révolutionnaire... Le concept est simple : séparer la mise en forme du contenant et du contenu. Qu'est-ce que la mise en forme ? C'est tout ce qui concerne une disposition graphique d'éléments au sein de la page, cela va aussi bien de la couleur d'un texte à la disposition horizontale de celui-ci, en passant par des couches de graphiques et même des opacités ... N'allons pas trop vite, voyons ceci en détail. Si en HTML, j'écris ceci :

Mon texte bleu

comprenez : texte en bleu, italique, souligné. Supposons que j'en fasse un titre de paragraphe :

Mon texte bleu

Si j'ai 10 paragraphes, j'ai 10 fois ce charabia à écrire ... L'inconvénient est alors triple : 1- 10 fois à réécrire multiplie par 10 le risque d'erreur (faute de frappe, etc ...) 2- 10 fois alourdit d'autant plus la page 3- 10 fois alourdit le code source, et le rend plus difficilement maintenable (si demain je veux du rouge, je dois rééditer mes 10 titres, imaginez si j'ai 500 pages !!!) Alors il existe une solution, qui est très simple : la séparation de la mise en forme. C'est une méthode qui dit : le texte "bidule", je l'affiche selon un style que j'appelle "truc". Ainsi, si jamais j'ai 500 titres qui font appel au style "truc", la modification d'une seule des propriétés de "truc" modifiera les 500 titres !!! (valable pour un texte, mais a fortiori n'importe quel élément de page : un formulaire, un tableau, un bouton de formulaire, un titre ... une liste ...) Ah bin voilà, si vous avez compris ça, vous avez compris grosso modo 70% des CSS. Comment faire ? En HTML, il suffit déjà de déclarer le style dans la page. Entre et , on peut mettre ces lignes : STOP ! Erreur ... Car on retombe dans le problème des 500 pages à modifier ... Ceci m'oblige (et cette méthode peut tout de même s'appliquer) à rééditer les 500 pages pour y coller les définitions des styles, et si jamais je veux changer une définition, je dois me retaper les 500 pages, non merci ! Réflexe : lier un fichier. (ou /> si XHTML) Oui, mais au juste, que doit contenir le fichier CSS ? Très bonne question. Le fichier CSS est un fichier de texte simple qui contient les définitions CSS. Il y a 3 sortes de définitions : on peut définir une classe (le cas le plus habituel), on peut définir une balise, ou un calque. Les calques, je ferai un apparté en fin de paragraphe. Cas d'une classe Une classe CSS est une définition vierge qui peut s'appliquer à n'importe quel élément du code HTML (sous réserve qu'il contienne des trucs susceptibles d'être modifiés !) La classe se définit par un point suivi du nom de la classe, et entre accolades, les propriétés séparées de leur valeur par 2 points. Voici un exemple : [code] .classe_paragraphe_miniature { color:#0000FF; font-size:8pt; } [/code] ainsi, toute balise HTML faisant appel à la classe nommée "classe_paragraphe_miniature" aura un texte en 8 pt et écrit en bleu ! Coté HTML, cela donne : mon texte ... en miniature !

ATTENTION: dans la page HTML, on ne met pas le point qui précède la définition dans le fichier CSS. ATTENTION n°2 : les noms de classe CSS ne doivent comporter ni espaces, ni ponctuation, ni caractères spéciaux... Cas d'une balise En css, on met directement le nom de la balise (SANS les chevrons) puis les accolades avec les propriétés. Exemple : [code] p { color:#000000; font-weight:bold; } [/code] ainsi, par défaut, tus les

de la page HTML seront en noir et en gras, il n'y a PAS besoin de le rajouter. Par ceci, j'ai défini le paragraphe

comme noir, gras. un autre exemple en CSS : [code] em { font-weight:bold; } [/code] ainsi tout texte qui sera mis en emphase avec la balise sera en même temps mis en gras ... Cas d'un calque : C'est une zone de fenêtre qui va contenir des éléments. Cela sert pour la mise en page. On peut définir sa position à l'écran, ainsi que les propriétés de son contenu. exemple de calque : [code] #calque_menu { position:absolute; top:0; left:50px; width:100px; height:200px; background-color:#00CCDD; color:#00FF00; } [/code] et en HTML :

--- Mon menu ---

je précise que div n'est pas exclusivement réservé aux calques. L'avantage des calques est qu'on peut en superposer, exemple : [code] #calque_menu_gauche { z-index:2; } #calque_centre { z-index:100; } [/code] et en HTML, qu'on écrive :

--- Mon menu ---

--- Mon centre ---

--- Mon menu ---

produira le même effet : calque_centre sera toujours sur la couche au dessus de calque_menu_gauche. L'autre avantage des calques est de cloisonner l'écran, un peu comme les cadres, mais sans en poser autant d'inconvénients. *** Fin du topic *** J'arrête là ce topic, pour une question d'horaire, d'une part, mais surtout parce que je pense avoir fait le tour des principales erreurs qui sont demandées dans ce forum. Si d'autres vous viennent à l'esprit, n'hésitez pas à me les signaler, si moi même j'en ai fait, idem (mais je pense pas) Si vous avez besoin de compléments d'infos sur un point abordé, je suis dispo par mail (mis dans mon site), ou par MP. Matthieu

Modifié par Malcolm le 05/01/2009 00:14

titre

Mon texte bleu

Les bons plans du moment PC Astuces