Dernière mise à jour :
Vous pouvez trouver mon cours sur le HTML-Javascript, mes astuces de programmation de pages WEB dans la page Mes astuces, une page sur la publicité Pub et la page pour les projets de mes étudiants à Projets WEB. Je conseille néanmoins à mes étudiants de regarder cette page et celle des astuces.
Liste des chapitres de cette page
Le HTML | Sa page sur internet | Le style | le Javascript |
La publicité | le Php | Faire une belle page | Remarques |
Bien que je déconseille complètement l'utilisation de FrontPage (surtout) ,Netscape Composer ou Mozilla composer (que je ne connais pas trop, mais il ne peut qu'être mieux), il peut être intéressant de faire ses premiers pas avec ces logiciels. Je conseille plutôt d'écrire les textes directement en html : pour afficher les mêmes pages, la taille des fichiers peut-être divisée au moins par deux et largement plus (10 pour le fichier dès) pour l'utilisation de tableaux par exemple. Le temps de chargement étant proportionnel à la longueur du fichier, il est important de ne pas décourager un lecteur éventuel. Je conseille aussi de réfléchir sur les effets de style : faut-il un fichier court, rapide à charger ou quelques effets de style qui feront un fichier long à charger. Ces derniers peuvent doubler la taille d'un fichier. Je veux aussi signaler que FrontPage gère très mal les images sur une page WEB : il ne prend pas toujours en compte les différentes tailles de texte qu'offrent les navigateurs.
Je remarque cependant que les logiciels Frontpage ou Netscape Composer proposent parfois des astuces qu'il peut être intéressant de recopier. Cependant Frontpage utilise des codes spéciaux de Micro$oft car ce dernier doit vouloir casser le HTML qui ne lui appartient pas pour assurer son hégémonie sur le monde des logiciels. Le pire arrive quand vous télécharger votre site conçu entièrement sous FrontPage sur un hébergeur : si ça marche, c'est que vous êtes vraimant très chanceux! Normalement, il doit y avoir des problèmes dans les liens car Micro$oft ne gère pas la différence entre les majuscules et les minuscules contrairement à tous les bons hébergeurs :-). J'ai testé avec un site que je n'ai pas conçu :-(. Je tiens encore à vous signaler que des pages Micro$oft sont presque illisibles par de vrais navigateurs non Micro$oft et ceci est encore plus vrais quand on est sous linux :-).
Voici des sites qui m'ont aidé à débroussailler le html :
Le HTML permet faire la pagination, de placer des images et des liens, de faire des menus, fixer les couleurs (et en javascript, on peut les changer comme sur cette page)... Vous pouvz voir mes astuces en HTML sur ma page d'astuces. Vous pouvez regarder la partie HTML de mon cours.
Après avoir créé vos pages sur votre ordinateur, vous souhaitez installer votre page sur internet, le mettre en ligne : trouver un hébergeur. Il y en a plein, des gratuits ou des payants qui offrent différents services. Commencez par essayer un gratuit. Parmi les services importants qu'ils peuvent proposer il y a la possibilité de faire un site avec du php et MySQL. Pour celà, je conseille pour le moment free.
Si on veut avoir de la visite, il faut se faire référencer dans les moteurs de recherche. Il y a des moteurs de recherche généraux, on peut y aller, mais ceux qui apportent le plus de visites sont les moteurs propres à votre domaine. Ceux-là sont généralement moins connus, mais les personnes intéressées par votre sujet tomberont facilement dessus lors de leurs recherches. Ces moteurs demanderont en retour que vous mettiez un lien vers leur portail en échange de votre référencement : c'est un échange de service. C'est probablement par un de ces liens que vous tomberez vers ce moteur de recherche.
Un autre mode de diffusion est constitué par les anneaux : ils emmènent au hasard vers un autre site portant sur le même sujet. La dernière méthode est un échange de lien (avec ou sans bannière) avec un autre webmaster. Là, c'est un travail de recherche de site sur le WEB qui commence. Il faut bien cibler les intérêts de son site pour savoir où se faire référencer : on peut vous refuser pour non concordance de sujet.
Lors du choix de l'hébergeur, des échanges de liens et même de la pub, on privilégie certains sites. Je pense qu'il est important de réfléchir vers qui va notre préférence. Ceci est important en ce moment où les hébergeurs, les "start-up" survivent tant bien que mal : beaucoup se font racheter. C'est vous webmasters et surfeurs qui allez arbitrer entre toutes ces start-up (trop nombreuses pour toutes survivre). Ce choix, on peut essayer de le faire pour tous les actes de la vie courante : en achetant ça, je cautionne quelle philosophie, quel mode de travail? Serai-je d'accord pour travailler comme les ouvriers qui ont fabriqué ce produit ?
On peut évaluer soi même ce travail grâce à un compteur, voir la page de garde. Attention le mien met aussi des cookies, faites l'essai en ayant activé puis désactivé les cookies. Ce compteur est personnel et n'alimente pas les bases de données de je ne sais quel boite dans je ne sais quel but.
Lors de ces échanges, vous verrez arriver sur votre page des codes en JavaScript. Ce sont des petits programmes en javascript qui sont inclus dans votre page HTML et qui permettent des effets comme la bande du bas de l'écran, la mise à jour automatique de la date, de faire agir les boutons et menus placés en HTML, contrairement au php, on ne demande rien au serveur : un serveur html simple est suffisant... Attention : Ne pas confondre avec Java, c'est certes basé sur le même langage, mais avec des buts et des moyens différents. En Java on peut écrire des applets pour les pages web (programmes tournants sur le serveur). Ces applets permettent de faire d'autres effets sur les pages. On trouve des site WEB qui en proposent des tout faits, prêts à servir.
Voici les papiers qui m'ont été utiles pour le moment :
Le javascript est un langage interprété, c'est à dire qu'on ne compile pas les instructions pour en faire un programme en langage machine directement lu par le processeur. Ceci permet une exécution sur différents systèmes avec différents processeurs. Je me suis aussi servi de cette caractéristique pour faire mon fichier tracé de fonction. Certes, à ce niveau là, on ne parle plus d'écrire des pages HTML, mais de faire des programmes sur des pages HTML! Vous pouvz voir mes astuces en javascript sur ma page d'astuces et la partie Javascript de mon cours
Personnellement, je considère les pubs comme des informations supplémentaites quand elles ne gènent pas la lecture des informations apportées par le site. C'est grâce à elles qu'on découvre de nouveaux sites et des nouveautés du WEB.
La liste des sponsors qui ont bien voulu de mon site est sur la page Pub : un sponsor est libre d'accepter les sites sur lesquels il apparaîtra. La liste des sponsors est triée suivant le mode de rémunération : payement par click, pourcentage des gains et parrainage. Par choix personnel, je n'ai choisi que des annonceurs français.
J'ai aussi remarqué que les pubs qui payent le plus sont les pubs de sexe. De celles-là je n'en veux pas, d'une part parce que mon site est pour tous, d'autre part pour des raisons personnelles. C'est pour cela que les sites sans déontologie en abusent, ce sont les sites de piratage (WARES), par exemple, où on peut trouver des informations entre deux paires de fesses.
Enfin bon pour le moment, heuseusement que j'ai un boulot rentable car le site ne me rapporte que les railleries de ma femme. Le seul intérêt que j'ai trouvé à l'installation de la pub est la compréhention très partielle du système qu'elle offre. On comprend par exemple pourquoi certains sites peu scrupuleux mettent plein de sexe...
Si vous êtes intéressés, allez voir ma page Pub.
Il est important qu'un visiteur ne soit pas perdu et trouve ce qu'il cherche (si vous voulez qu'il revienne et/ou fasse de la pub). Je conseille de mettre en bas de chaque page des liens, dont entre autre, mis en évidence,le lien vers la page suivante (si il y en a une). Je conseille aussi une présentation des pages du site (ou une partie du site) s'il présente un nombre important de pages. Il est aussi intéressant de faire un index pour les pages longues (celle-ci en mérite un!).
Pour éviter des liens en bas/haut de page en permanence (pas évident à tenir à jour), on peut mettre une frame de lien. Mais, je pense qu'elle mange la place du texte, cependant, si c'est un texte qui demande beaucoup de réflexion, de va et vient, l'option frame peut devenir intéressante.
Il est important aussi de ne pas faire des pages trop longues (sauf cas particulier à débattre). C'est pour cela que mon ancienne page web a été découpée en 4 : Introduction, Mes astuces, Projets Web et Publicité (voir frame à gauche) quand elle est devenue trop grande. Par la suite, j'ai même redécoupé la page Mes astuces en morceaux quand elle est aussi devenue trop grande. En vous disant ça j'agrandis la taille de cette page qui va aussi devenir trop grande...
Vous trouverez aussi (et surtout) de bons conseils pour présenter les pages sur le site de WPhilippe. Ce site présente aussi le JavaScript.
Une combinaison de balises html particulières et de javascript permet de faire bouger des calques sur votre page, regardez, ce qui se passe la souris passe sur les liens de la frame de gauche. C'est du DHTML. On peut même modifier le contenu des calques et donc modifier les pages, regardez mon fichier charge.html, c'est avec ça que je modifie l'affichage de l'arborscence.
Pour le moment, je n'ai pas fait beaucoup d'essai : Pour voir l'arborescence de man site en temps réel, gestion des sphères, le décompte des visites ou l'affichage d'une image : . Je m'en sers aussi pour la programmation d'interface graphique. Pour ceci, il faut avoir son propre serveur php et maintriser le HTML/Javascript, car on passe par un serveur http via un navigateur. Voici un lien vers mon premier essai : un lecteur de répertoire d'images, ou de BD.
Attention à l'herbergeur car le php est exécuté sur le serveur qui doit donc être compatible php, ceci n'est pas le cas avec le javascript qui lui s'exécute sur l'ordinateur du surfeur. Ceci est une grosse différence entre le php et le javascript : pour le premier, il faut être connecté pour faire marcher les routines alors que le second permet de faire fonctionner le fichier même une fois déconnecté. Je trouve un nouveau problème : l'exécution de mes fichiers est différentes à multimania, sur Chez.com ou à Free : les erreurs ne sont toujours vues de la même façon.
A partir de script de compteurs que je trouve sur les sites que je recommende en fin de ce chapitre et modifie par la suite, je me fais mon compteur personnel. Le php associé aux cookies peut faire un duo de choc. Voir ma page sur les sectes.
Pour ma part, j'ai commencé avec un serveur php sur mon PC grâce à easy php. Cette installation sous Windobe 2000 m'a posée un gros problème : le serveur impliquait de stoquer son site avec les fichiers php dans un répertoire www qui était dans le répertoire de easy php. Ceci me génait car, d'après moi, une arborescence propre implique de séparer les exécutables des fichiers de travail (le site php par exemple). Pour corriger ce problème, j'ai du entrer dans le fichier httpd.conf et modifier l'entrée DocumentRoot et lui indiquer mon répertoire de travail, le même échange se fait 8 lignes plus loin. Il faut aussi savoir qu'à partir du moment où vous avez un serveur apache (pour utiliser php), dès que vote PC est branché sur internet, n'importe qui peut accéder à votre répertoire de travail par http s'il trouve votre adresse, à moins que vous protégiez le port 80 de votre PC par un fire-wall. Maintenant, je suis sous LINUX et le php, avec apache est un élément naturel du système. Vive LINUX!
Le fait que le php est un langage qui s'éxécute sur le serveur est un avantage pour la gestion de fichiers : lecture et écriture qui est impossible en javascript. Cette gestion permet donc de montrer que ce qu'on veut. Avec le php, on peut passer des paramètres d'un fichier à l'autre lors d'un appel grâce aux FORM, cependant, la chaine transmise ne peut pas exéder 255 charactères. Le javascript reste cependant indispensable car il fait ce que ne peut pas faire le php : le javascript gère le temps réel sur votre PC à partir d'un fichier que lui a fourni le serveur. Cependant, avec le php, on ne peut plus télécharger un site et le parcourir de chez soi sans précautions préalables comme installer sur son ordinateur son propre serveur php.
Le langage ne me semble pas compliqué à apprendre si on en connaît d'autre comme le JavaScript ou le C. J'ai une chose à dire : un fichier php (extention .php ou .php3), c'est comme un fichier html avec du JavaScript avec en plus un autre langage entre les balises <? et ?> comme le Javascript est entouré par les balises <script> et </script>. Pour vous aider, je propose ces liens vers la liste des fonctions php et vers comment ça marche.
On peut gérer des bases de données avec du php. Ceci me semble une force assez importante, car la plupart des hébergeurs WEB compatibles proposent aussi les bases de données. Il me semble qu'ils proposent pratiquement toujours MySQL, c'est pour celà que j'ai choisi celle-ci plutôt qu'une autre. Dans ce domaine, je suis une grand débutant. Je vous conseille de commencer par trouver des sites qui montre le MySQL par l'exemple puis ensuite la liste des fonctions MySQL. Pour le moment, je n'utilise que 10% des commandes de php qui servent à gérer le MySQL, les autres, je n'en vois pas encore l'intéret car je ne les connais pas.
C'est une méthode, efficace, peu gourmande, et rapide pour mettre en page ses pages. Vous pouvez voir un exemple avec cette page : toute la mise en page est dans un seul fichier qui me sert dans d'autres pages (regardez bien la structure de mes chapitres).
Je tiens à vous signaler que les arguments des styles sont dominants sur les arguments des balises : au lieu de mettre <p align="center">, on doit mettre <p style="text-align : center"> si un autre alignement est donné dans la feuille de style. C'est pour ceci, a mon avis, que la nouvelle norme XHTML est bien plus intéressante que le HTML : on réduit le nombre de possibilité pour faire chaque chose à une si possible : la prédominante.
Je tiens à signaler que IE 6.0 de Micro$oft n'est bien sur pas 100% compatible : font-size : <pourcentage> ne marche pas normalement et P:first-letter qui permet de jolis effets sur les premières lettres (regardez cette feuille avec Mozilla) ne marche pas! Merci Micro$oft pour tes merdes!
Si vous voulez être sur que votre style particulier ne déborde pas sur d'autres parties du texte, pensez à définir toutes les balises que vous utilisez comme <p> et <li>, où même en HTML, appliquez les normes du XHTML, c'est compatible et plus sur !.
Les normes W3C sur les feuilles de style sont là : VF de CSS1, VF de CSS2, VO de CSS1 et VO de CSS2.
Un test pour mettre en évidance l'intérêt des calques par rapport aux frames en CSS.
Une méthode pour faire des fonctions ou des effets sur une page WEB consiste à repérer une page qui les fait et de s'en servir comme exemple. C'est en se baladant sur le WEB qu'on trouve des idées et des exemples. Attention : les fichiers php ne sont pas transmis lors de la connection contrairement aux fichiers html.
C'est aussi en se baladant sur le WEB qu'on trouve des gif animés pour rendre le site attractif. Attention, tout de même, trop d'animations cache le texte : on ne regarde plus que les images qui bougent.
Je n'aime pas les frames car souvent, lorsque qu'on se balade sur le WEB, elles restent figées et les nouvelles fenêtres s'ouvrent dans une frame, mais pas sur toute la page. Vous pouvez faire la différence en cliquantsur les pubs ( sauf la première pour laquelle j'ai fait une procédure JavaScript bien particulière -à tester- ) ou sur le menu de droite. Il suffit d'ajouter un Target="_top" dans la balise de lien.
Ci dessous un lien que je trouve original : essayez le en arrivant de différentes pages : il marche comme le bouton retour de votre navigateur.
Bon courage pour votre site. Vous pouvez m'envoyer vos réflexions et astuces, Merci.