Site Perso de

Thomas JANNAUD

Des actualités personnelles sous un style impersonnel, et inversement.



Créer un site web : Tutoriel complet
Créer, designer, héberger, rentabiliser 19 Juin 2011
web

Se faire un site Web, c'est sympa : ça change de la programmation bête et méchante et on peut laisser libre cours à sa créativité !
Il y a pourtant des pièges à éviter et cette page est là pour vous faire acquérir les bonnes bases, dès le début.

Vous verrez comment faire pour tester son site internet sur son ordi perso avant d'acheter un hébergement et de publier votre site, quelle architecture je conseille pour vos fichiers, dossiers, images, ... Vous verrez aussi comment rentabiliser votre site internet et gagner un peu d'argent.

Nous allons travailler avec un petit site test qui nous servira d'exemple pour pouvoir bien comprendre comment les choses fonctionnent.

Si vous êtes un peu bricoleur, que vous aimez comprendre comment les choses fonctionnent, que vous n'avez pas de problème à maîtriser des logiciels nouveaux, ... alors faites votre site "à la main". Vous deviendrez vite familiers avec les serveurs Linux, la programmation, ... et vous ne serez pas déçus.

Sinon, ou si après tout ce que je vous explique c'est encore trop compliqué pour vous, ils vous reste à faire appel à des sociétés qui peuvent vous faire un site pour pas cher, comme Hexaweb.

Hébergement, logiciels

Pour avoir un site web, il faut 2 choses : un serveur et une adresse web (ex : http://jannaud.fr ici) que l'on redirige vers le serveur. Le tout est souvent vendu sous forme de pack comme ici à 1&1.net, le fournisseur que j'utilise et qui est le meilleur du marché.
Un serveur est un peu comme un disque dur accessible par tous sur le net. J'ai écrit ces pages sur mon ordinateur personnel et après je les envoie sur le serveur pour que tout le monde puisse les lire depuis le monde entier. Ainsi, quand quelqu'un tape http://jannaud.fr, il est redirigé vers les fichiers du "disque dur" / serveur.

Un serveur est même un peu plus intelligent que ça, il peut avoir une base de données et stocker des informations. Par exemple Amazon a une grosse base de données avec le prix, l'auteur, une image... de millions de livres. Cela veut dire que quand vous demandez une page sur Amazon, le serveur effectue des tas de calculs très rapidement avant de vous envoyer la page, et en fonction du stock, du pays, ... le prix et d'autres informations sur la page peuvent changer. C'est ce qu'on appelle des pages dynamiques, a contario des pages statiques qui ne changent pas au cours du temps.

Je vous conseille de faire un site qui fonctionne bien sur votre ordinateur, et quand ce sera fait, achetez vous de l'hébergement et publiez-le, ne faites pas l'inverse !

Si vous avez Windows, téléchargez Wamp ou Mamp si vous avez un Mac. Ce logiciel transformera votre ordinateur en serveur local. Quand vous développerez votre site, vous utiliserez votre navigateur internet (Google Chrome, Firefox, Internet Explorer, ...), irez sur quelque chose comme http://localhost:8888/monsite/mapageweb.php et vous verrez tout exactement de la même manière que si vous aviez payé pour un hébergement et un super nom de domaine. Personne d'autre ne peut y accéder, vous pouvez donc bidouiller tout ce que vous voulez.

Il ne suffit pas d'installer Mamp ou Wamp. Il faut qu'ils soient en train de tourner si vous voulez que ça fonctionne. Si vous éteignez votre ordinateur et le rallumez, il faudra relancer Wamp/Mamp avant de pouvoir travailler sur le site.

Sur un Mac, vous devez avoir votre site dans le dossier Sites. Allez donc dans ce dossier Sites (au même endroit où vous avez les dossiers Musique, Films et Images) et créez un dossier avec le nom du site que vous voulez, sans espace si possible. Le nom n'a pas d'importance. Si le nom est "monsite" et votre fichier toto.html alors il sera lisible à http://localhost:8888/monsite/toto.html. Rappelez-vous que Mamp/Wamp doit être en train de tourner.

Il vous faudra ensuite télécharger Filezilla pour envoyer vers le serveur tous les fichiers qui composent votre site. C'est un logiciel très simple à utiliser. Vous vous connectez avec mot de passe / login que votre hébergeur vous communique, vous avez vos fichiers de votre ordinateur sur la gauche, ceux sur le disque sur la droite, et vous faites des glisser-déplacer pour envoyer vos dossiers vers le serveur.

screenshot filezilla

Récapitulatif

Il vous faut :

Structure

Téléchargez ici un petit site tout fait qui va nous servir d'exemple. Le plus simple pour apprendre n'est pas de partir de rien mais plutôt de voir des choses qui existent déjà et de les modifier pour arriver à ce que vous voulez.

Dans ce dossier :

structure simple d'un site web

Comme sur l'exemple, je vous conseille d'avoir toutes vos pages web à la racine du site, et de mettre vos images, vos scripts, ... dans des petits dossiers séparés. On expliquera plus loin à quoi servent les choses.

Le mieux pour comprendre comment le site fonctionne est de MODIFIER les choses !

Si vous voulez avoir un site, je vous conseille de partir d'une structure toute faite, comme celle-là. Changez juste le texte, les images, les liens, ... Et voilà. Pour avoir un style, rien ne vous empêche de piquer tout simplement le style d'un ou de plusieurs sites qui vous plaisent. De toute manière on peut voir le code source d'une page donc ce n'est pas dur, il suffit d'aller sur un site et de faire Fichier->Enregistrer pour voir tous les fichiers et le code d'un site.

FrontPage / DreamWeaver : Que choisir ?

Je l'ai dit dans la partie programmation et je le répète, le mieux est de ne pas choisir ces éditeurs de site web. Difficile à croire, je veux bien, cela semble plus rassurant de les utiliser. Mais alors pourquoi ?

  1. J'ai déjà utilisé ces logiciels, et pour bien les utiliser il faut d'abord s'acheter un bouquin / consulter des tutoriels pour pouvoir bien appréhender ces logiciels. Donc perte de temps, car vous voulez apprendre à vous faire un site web ou apprendre à utiliser un logiciel puis après apprendre à faire un site web ?
  2. Vous allez vous donner un mal de chien à faire des choses simples à faire, comme mon menu sur la gauche qui ne bouge pas quand vous faites défiler le reste de la page.
  3. Vous voulez un site dégueulasse comme ça ? Alors ne suivez pas mes conseils et utilisez FrontPage ou DreamWeaver.
  4. Maintenant internet est accessible depuis un iPhone ou autre (écran disons de 5 cm * 10 cm), à un Vaio (11 pouces), à un ordi normal, jusqu'aux iMac 28 pouces (écran 50 cm * 50 cm). C'est pour cela qu'il faut faire un site web qui ne dépende pas de l'ordinateur visé. Et DreamWeaver et FrontPage ne sont pas faits pour ça.
  5. Dernier argument, un jour vous voudrez aller plus loin dans votre site : faire des petits scripts, ajouter du PHP (pour stocker des données, pour connaître l'IP des gens qui viennent sur votre site, ...) et vous ne pourrez pas en faire avec DreamWeaver/FrontPage. D'autre part, comme ces logiciels écrivent le code HTML à votre place, 1) le code généré n'est pas très beau donc pas facilement modifiable et 2) vous n'avez pas l'expérience d'écrire du code HTML et ça vous gênera pour écrire du JavaScript ou du PHP.

Bref, faites moi confiance et n'utilisez pas ces bêtises. D'ailleurs les professionnels ne les utilisent pas !

Il y a quelques années j'ai voulu me faire un site, et ça me faisait peur de lire du code html sur des tutoriels, alors j'en n'ai fait qu'à ma tête et j'ai pris FrontPage et j'ai fait un site très très moche, parce que ce n'est pas souple et qu'on a beaucoup de mal à faire ce que l'on veut.

C'est peut-être plus rassurant d'écrire son site avec FrontPage mais... faites-moi confiance, même si vous ne me connaissez pas !

HTML, PHP, JavaScript, ... : Que choisir ?

Vous avez certainement entendu parler de ces langages, mais comment choisir celui avec lequel on fait un site ? Et bien en fait un peu tous, tout dépend de vos besoins. Explication :

HTML

C'est sans doute le seul à connaître vraiment bien, si on veut se faire un site simple, avec des pages, mais pas de forum, ni rien d'autre. Mais pas de panique ! Ce n'est pas un langage de programmation. C'est juste un moyen commode pour indiquer à votre navigateur web ce qu'il doit afficher : le texte que vous souhaitez, la couleur de celui-ci, les images autour... Enregistrez une page web quelconque, et ouvrez le .html avec le bloc notes. Vous verrez que ça ne ressemble pas tant à du chinois que ça ! Ça s'apprend en 10 minutes.

Vous êtes par contre OBLIGES de l'apprendre, car toute page Web, faite en PHP ou quoi que ce soit d'autre, est amenée à générer au final du HTML.

Le défaut du HTML, c'est qu'il ne permet pas d'intéractivité : ça affiche quelque chose, c'est tout. Il n'y a pas de forum de discussions, ni rien de ce type possible avec. C'est pourquoi on a créé les autres langages.

CSS

Ce n'est pas vraiment un langage. C'est le pendant du HTML qui dit comment mettre en forme une page HTML. Vous écrivez juste des choses du genre "mettre tous les titres en blanc sur fond bleu", "encadrer les images d'une bordure", ...

JavaScript

Il n'est pas nécessaire pour faire des pages Web, mais c'est celui qu'il faudra apprendre pour avoir de l'intéractivité, c'est à dire des animations, des petits jeux, mais aussi de faire des requêtes au serveur dans le background, pour charger des choses sans avoir à changer de page.

PHP

A la différence de Javascript qui s'exécute sur votre ordinateur, PHP s'exécute sur le serveur avant de vous envoyer la page Web. C'est donc lui qui va créer un contenu dynamique, au sens où tout le monde ne va pas voir la même page. Quand vous allez sur un forum, le contenu change en fonction du temps. Quand vous allez sur gmail pour voir vos emails, vous voyez VOS emails, pas ceux de quelqu'un d'autre. Le contenu change en fonction de l'utilisateur.

Le PHP est en fait créé spécialement pour gérer des bases de données et faire intéragir le visiteur du site avec. Et ceci très simplement, par le biais de requêtes MySQL.

Les grandes étapes

Créer son site, c'est :

  1. Ecrire le contenu en html, sans trop se soucier de la forme, mais juste du contenu : écrire un titre, puis les paragraphes, mettre des listes pour les exemples, ...
  2. Styler le tout en CSS : mettre des couleurs, placer les éléments sur la page, ...
  3. Chercher sur internet comment faire ça et ça en CSS
  4. Une fois qu'on sait comment mettre du style, réécrire des bouts du fichier html pour mieux gérer le contenu, pour ensuite mieux gérer le CSS
  5. Restyliser le CSS une fois qu'on maîtrise bien la pratique
  6. Re-regarder sur internet des propriétés CSS
  7. Optionnel : mettre du code JavaScript ou PHP si on veut se faire un compteur du nombre de visites d'une page, se souvenir de l'utilisateur, ...

Par où commencer ?

Déjà, il vous faut savoir quoi mettre dans votre site, ce qui est la partie la plus difficile !
Ensuite, téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents et modifiez les pages et le contenu, tout simplement.

Si vous avez suivi mes conseils, vous ne tenterez pas d'utiliser FrontPage ou DreamWeaver ou n'importe quel autre logiciel compliqué. Tapez vos pages Web dans un éditeur de texte tout bête (bloc note, NotePad++, ...) et regardez ce que ça donne avec votre navigateur.

Il ne faut pas se soucier du style pour l'instant. Ça viendra après. Ce qu'il faut comprendre c'est que dans vos fichiers html vous taperez le contenu / la structure du site, et dans le fichier des styles, vous associerez une mise en forme à la structure. Dans l'exemple à télécharger, il y a 2 fichiers de style, très vite fait, pour un seul contenu. Comme ça vous pouvez tout contrôler depuis un seul fichier, pour avoir un design global cohérent, simple et rapide.

Cliquez ici si vous ne me croyez pas : ce site s'appelle le "Jardin Zen CSS" parce que justement, il y a un seul contenu qui a été écrit, et après des graphistes se sont amusés à mettre du style. Ce site illustre bien le fait qu'on doit séparer le contenu du style : le design change simplement du tout au tout sans que le contenu ne change, juste en associant une feuille de mise en forme différente.

Bref, fermez les yeux et laissez vous guider...

Le HTML et ses balises

Téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents, et ouvrez un éditeur de texte un des fichiers HTML pour voir son contenu.

En HTML tout est entre des balises. Elles servent à structurer votre document. Si vous voyez cette page, il y a un titre en haut, puis un petit paragraphe, puis une bande verte avec un titre dedans, puis des petits paragraphes, puis une bande marron avec un autre titre (le sous-titre), et encore d'autres paragraphes, ... et ainsi de suite.

Pour ce faire : ouvrez une 'balise', écrivez ce que vous voulez, puis fermez la balise.

Pour un nouveau paragraphe
<p> (votre texte de paragraphe) </p>
Pour un titre
<h1> (votre titre) </h1>. Pour un sous-titre : h2 et /h2, pour un sous-sous-titre : h3 et /h3, ... (jusqu'à h6 et /h6 en fait, mais très peu utilisés en pratique)
Pour faire une liste

<ul>
<li> (votre premier "item") </li>
<li> (votre second "item") </li>
<li> (votre troisième "item") </li>
...
</ul>

. Remplacer ul et/ul par ol et /ol pour créer une liste numérotée (ul : unordered list, et ol : ordered list).
Pour insérer un lien
(Dans un paragraphe seulement) : <a href="http://www. ...."> (nom du lien) </a>. L'adresse de votre lien peut être absolue (http:// ...) ou relative (mesphotos.html) : le lien pointera alors vers votre page mesphotos.html, à condition que ce fichier soit dans le même dossier que le fichier que vous êtes en train d'écrire.
Pour un lien vers un endroit précis de votre page
Dans votre page, écrivez <a name="unnom"></a>. Alors un lien <a href="#unnom"> pointera vers cet endroit de la page. Faites <a href="uneautrepage.html#unautrenom">un lien</a> pour atterrir en plein "milieu" d'une autre page. Faites <a href="#">Haut de la page</a> pour faire revenir au sommet de votre page web.
Pour insérer une image
Dans un paragraphe, à la place du texte d'un lien, ou n'importe ou : <img src="maphoto.jpg" alt="ceci est ma photo" />. src est l'abbréviation de "source". Elle peut être encore une fois absolue ou relative. src="MonDossier/static/images/MonSousDossier/maphoto.jpg" pour inclure des images dans un dossier. "alt" est l'abréviation de "texte alternatif". Les ordinateurs des mal-voyants lisent ce texte alternatif, pour que les mal-voyants aient une idée de l'image qu'ils pourraient voir s'ils avaient des bons yeux.
Pour mettre en exergue du texte
Vous avez le choix : <b> et </b> pour mettre en gras, <it> et </it> pour mettre en italique, ... Mais souvenez vous qu'il faut dissocier le contenu de la forme. Je mets personnellement <em> et </em> (em pour "emphase") pour mettre du texte en valeur. C'est seulement après que je pourrais définir de quelle manière (souligner le texte, le mettre d'une autre couleur, l'encadrer, ... les possibilités sont multiples.) L'intéret encore une fois de séparer contenu et forme permet ici, en mettant 'em' au lieu de 'b' ou 'it' est que si je change d'avis, je peux changer toutes mes mises en valeurs d'un seul clic, alors que si vous avez mis 'b', ... vous n'avez plus le choix : ce sera gras et rien d'autre.
Pour créer une liste de définitions
C'est un peu comme les listes, mais il y a 2 "item" à chaque fois. Par exemple vous être en ce moment même en train de lire une liste de définitions !

<dl>
<dt> (mot à définir) </dt>
<dd> (la définition du mot) </dd>
<dt> (2eme mot à définir) </dt>
<dd> (la définition du mot) </dd>
<dt> (3eme mot à définir) </dt>
<dd> (la définition du mot) </dd>
...
</dl>

"dl" est pour definition list, "dt" pour definition title, et "dd" pour definition description.
Pour crée un tableau

<table>
<thead>
<tr>
<th>titre colonne 1</th>
<th>titre colonne 2</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>ligne1 colonne1</td>
<td>ligne1 colonne2</td>
<td>ligne1 colonne3</td>
<td>...</td>
</tr>
<tr>
<td>ligne2 colonne1</td>
<td>ligne2 colonne2</td>
<td>ligne2 colonne3</td>
<td>...</td>
</tr>
...
</tbody>

Vous l'avez compris, head pour les en-têtes des colonnes, puis viennent les tr (tables rows) : les lignes.

Une petite bizarrerie

Les navigateurs web ne tiennent comptent ni des retours à la ligne, ni des longs espaces.

Ça m'a beaucoup surpris au début, mais c'est comme ça : si vous espacez vos motsavec plus de 1 espace, le navigateur ne fera comme s'il n'y en a qu'un. Idem avec les sauts de lignes : ça ne passe pas à la ligne mais ça fait comme si on mettait un espace.

J'imagine que quand les gens voulaient centrer leur texte, ils mettaient beaucoup d'espaces pour faire semblant. Le problème, c'est qu'un site web est fait pour être vu par beaucoup de gens (et oui ! ne faites pas le faux modeste...) donc sur beaucoup d'écrans différents. Et donc votre page ne doit pas faire des tas de petites bidouilles pour être centrée sur VOTRE écran, parce que ça ne le sera pas sur beaucoup d'autres. D'autre part on n'est pas toujours en mode plein écran quand on fait du web, et donc votre site doit s'adapter à la taille de la fenêtre.

Mais ne vous inquiétez pas ! Le navigateur web gère ça à votre place. C'est pour ça qu'il ne faut pas essayer de bidouiller. Ecrivez vos petits paragraphes, et le navigateur ira à la ligne automatiquement pour ne pas faire sortir vos phrases de l'écran. Sympa, non ?

Les remèdes :

Pour aller à la ligne dans le paragraphe
<br/>. C'est une des rares balises qui s'ouvre et se ferme en même temps. (En même temps, c'est normal, ça demande juste de passer à la ligne, il n'y a pas besoin de mettre du texte !). Elle est cependant peu utilisée, on préfère souvent fermer le paragraphe et en créer un nouveau.
La balise <pre> ..... </pre>
Là par contre tout ce que vous mettrez entre sera pris en compte : si vous mettez 10 espaces, le navigateur mettra 10 espaces. Idem si vous faites des sauts de ligne. Attention cependant à ne pas abuser de cette balise. Je vous vois venir avec vos gros sabots ! Vous n'avez pas envie de faire des <ul> ... alors vous allez mettre un <pre> tout en haut de votre document et écrire normalement. Mais ça c'est mal. Parce que si vous faites ça, le navigateur ira à la ligne que quand vous mettrez un retour à la ligne. Autrement dit si vous faites une grande phrase ça ne marchera pas.

Pour vous donner un exemple, je mets <pre> quand j'ai affiché le code pour mettre la table ou la liste, sinon il m'aurait fallu écrire quantités de <br/>. Réduisez votre fenêtre, et vous verrez que mes paragraphes normaux se réduisent aussi pour s'adapter, alors que mes paragraphes sur fond blanc, non !

Imbrication des balises

D'une part vous avez le droit d'imbriquer toutes ces balises : mettre des images, des liens, ... dans un paragraphe, mais aussi des listes dans les cellules d'un tableau, faire des sous-listes, ... Il n'y a rien à changer en fait, juste au lieu de mettre "carottes", "petits pois" et "choux" dans les <li> vous mettez ul, li /li li /li /ul. Exemple :

Et le code correspondant :

<ul>
<li>viande</li>
<li>légumes : <ul>
<li>tomates</li>
<li>carottes</li>
<li>...</li>
</ul>
</li>
</ul>

Code complet d'une page

Pour ceux qui se demandent comment je fais pour afficher un signe < par le navigateur sans que celui-ci croit que c'est un bout de balise : j'écris &lt; ("lower than") et il y a beaucoup d'autres symboles pour ça. Pour écrire & j'écris &amp; par exemple. Comme d'habitude, n'oubliez pas que vous pouvez VOIR le code source de n'importe quelle page internet, pour savoir comment leur code HTML est fait ! Faites simplement Fichier ou Edition ou clic droit ou ... -> voir le code source de la page

Et enfin : je l'ai gardé dans un coin pour ne pas vous décourager tout de suite à faire du html, mais voici ce qu'il faut mettre en tête de votre fichier : c'est pour indiquer au navigateur que vous faites du html et pas autre chose.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Page perso de Thomas Jannaud : Langages Web</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/png" href="/static/images/monicone.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>


<!-- METTEZ VOTRE CODE ICI
body est le "corps" de la page, le reste ne servant
pas à grand chose, sauf 'title' qu'il faut changer
ainsi que l'icône, optionnel -->



</body>
</html>

Vous méritez une petite explication

Les 2 premières lignes
Elles servent à dire à votre navigateur : "ceci est du XHTML. Affiche cette page en tant que tel". (Parce que les navigateurs ouvrent aussi les images, ...) Inutile d'apprendre ce code par coeur ! Faites du copier-coller, comme tout le monde.
link
Le premier 'link' sert à relier votre page à 'style.css' : c'est ce fichier qui déterminera tout le design de votre site. Le second sert à spécifier un icône pour votre page (= une image png ou jpg, de taille 16x16 ou 32x32). Ces 2 links ne sont pas obligatoires.
meta
Normalement il y a beaucoup plus de balises meta. Elles servent aux moteurs de recherche. Vous mettrez dedans vos propres mots-clés définissant votre page.
<!-- Le commentaire -->
Les balises <!-- --> permettent d'insérer un commentaire dans votre site. Le navigateur n'en tient pas compte, mais il sert à celui qui écrit le site, par exemple pour se dire "demain penser à rajouter ça ici".

A la différence des logiciels exécutables, les pages internet ont un code "clair", c'est à dire que tout le monde peut voir ce code, il n'y a pas de compilation créant des fichiers objets ou autres. Par exemple dans FireFox, Menu "Affichage" puis "Code de la page". Comme ça si vous aimez bien le design d'un site, vous pouvez tout simplement faire un copier-coller du code, et changer juste le texte. Un peu bizarre qu'il n'y ait pas de sécurité de ce côté...

Et le meilleur pour la fin...

Il existe des balises un peu spéciales pour insérer des objets "inhabituels" : Flash, applets java, vidéos youtube, ...

Vidéo Youtube
<object width="400" height="300" type="application/x-shockwave-flash" data="http://www.youtube.com/v/votrelien"> <param name="movie" value="http://www.youtube.com/v/votrelien"/></object>
Applet Java
<!--[if !IE]>-->
<object classid="java:maclasse.class" type="application/x-java-applet" archive="monjar.jar" height="300" width="200" >
<param name="codebase" value="Applets" /> <param name="param1" value="valeur1" />
<!--<![endif]-->
<object classid="clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" height="300" width="200" >
<param name="codebase" value="Applets" /> <param name="code" value="maclasse" /> <param name="param1" value="valeur1" />
</object>
<!--[if !IE]>-->
</object>
<!--<![endif]-->

Ce code complexe n'est pas à comprendre. Il est cependant valide XHTML et fonctionne sur tous les navigateurs. Et c'est tout ce qui compte. Sa lourdeur est dûe au distingo fait entre IE et les autres navigateurs... :)
Le paramètre "archive" est optionnel (c'est si vous avez plusieurs classes java). Le paramètre "codebase" est optionnel aussi : c'est le nom du dossier dans lequel est mis votre applet (ne rien mettre si votre applet est dans le même dossier que votre page html).
Sinon "param1", "valeur1" ce sont les arguments transmis à votre applet. Optionnels aussi, donc, et en nombre illimité (avec le nom qu'on veut). Ils se récupèrent en Java par String s = getParameter("param1"); (et s vaudra "valeur1"). Cf ma page de Rubik's Cube si vous voulez voir le code Java et le code Html associé pour appeler l'applet.

HTML 5

La "nouveauté" c'est le HTML 5. Je serais vous j'attendrais 2012 pour faire votre site en html 5, le temps que plus de gens aient des terminaux équipés. Peu de changement au niveau de la syntaxe, si ce n'est que l'entête devient

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="Style/style.css" />
<title>La page d'accueil de mon site</title>
</head>

La vraie grande différence du HTML 5 réside dans les possibilités accrues de javascript : avec les balises canvas vous pouvez dessiner et afficher de la 3D. Si vous n'utilisez pas ça, autant faire un site avec une en-tête plus "vieille" que html 5 que tous les terminaux sauront afficher.

Déboguer

Parfois il y a un soucis dans le code : si une balise n'est pas fermée, tout ce qui suit va être contenu dans la boîte de cette balise. Il peut aussi y avoir d'autres soucis. Vous pouvez vérifier votre code à cette adresse. C'est pratique, et ça vous apprend même ce que vous avez le droit de faire ou pas.

Mais le top c'est quand même une extension de FireFox qui vous dit si votre page est valide W3C ou pas, et où sont les erreurs (sans avoir à copier-coller continuellement votre code dans le W3C).

le Design

"Oui, mais avec FrontPage on peut mettre des choses en couleur, ... mais là, on fait comment ?" demandez-vous tout benoitement.

Téléchargez ici un petit site tout fait qui nous a servi d'exemple dans les onglets précédents. Nous allons nous enfin nous intéresser au fichier style.css, dans le dossier "Styles"

Le style d'un élément html s'indique en CSS de cette manière :

body {color:blue; background-color:grey;}
h1 {color:red; font-size:large; border-style:solid;
border-width:1px; border-color:black;}
...

Vous voyez, c'est facile. Il y a des dizaines de propriétés possibles, alors je ne vais pas tout vous dire. Les plus importantes sont : height, width (hauteur, largeur, optionnelles comme tout le reste), font-family (la police, entre guillemets ("Times New Roman"), font-size, color, background-color, border (la bordure entourant votre objet), margin (les marges entre votre boite et les boites au dessus, en dessous, à gauche et à droite, padding (si vous voulez une marge intérieure cette fois entre les éléments DANS votre boite et la bordure de la boite), ...

Enfin les propriétés de positionnement sont d'une importance capitale. Il s'agit de position:absolute (ou relative ou fixed), left, right, top et bottom.

Vous pouvez indiquer les couleurs en hexadécimal (#FAEBD7 par exemple) où dire un nom comme white, green ou blue. Vous trouverez beaucoup de noms de couleurs ici.

Les "boites"

Je les mentionne depuis le début, et je n'ai encore pas dit ce que c'est. Body c'est une "boite" qui contient toutes les autres. Un paragraphe est une boite, et elle est elle-même placée dans body. Dans les paragraphes il y a des liens (placés dans des boites), des sous-listes, ... Tout ça dans des boites contenues dans des boites ... Il y a aussi des tableaux, des images, ... Bref tout ce contenu est géré par votre navigateur avec des boites, comme des poupées russes. Mais l'avantage des boites sur les poupées russes, c'est que c'est carré, et donc c'est plus facile à gérer.

C'est pour ça qu'il y a les propriétés margin-left, margin-top, margin-bottom et margin-right et idem avec padding-top, ... : les margin indiquent les 4 marges extérieures à votre boite, par rapport aux autres boites environnantes, tandis que les padding indiquent la distance séparant le contenu d'une boite au contour de la boite.

Les border définissent l'apparence de la bordure de la boite. L'idée de tout mettre dans des boites est pratique puisque chaque boite a ses petites propriétés (background-color, ...) et c'est pour ça que les CSS sont les initiales de Cascading Style Sheets : les propriétés d'une grosse boite sont données à toutes les boites contenues dans cette grosse boite, sauf si les propriétés des petites boites sont plus précises.

Exemples

Ce titre ("Exemples") n'est pas collé au bord de sa boite orange : il y a un fort padding-left. Les gros titres h1, en vert, ont un plus faible padding-left mais ils ont par contre une bordure et une font-size plus grosse.

Les titres sont contenus dans le body, tout comme ce texte. Mais le body a une couleur de fond blanche alors que les titres sont sur fond orange ou vert. Ce sont des boites incluses dans la grosse boite body, mais la propriété background-color a été redéfinie et c'est le plus haut niveau de précision (dans les boites) qui l'emporte. Idem pour les bouts de code sur fond blanc dont la police a changé.

Mes bouts de code sont dans des <pre> je vous l'ai dit. J'ai donc fait pre { backgroundcolor:white; font-family:"Courier New"; color:blue;}. Et si je veux donner une tout autre apparence je vous laisse imaginer ce que fait {backgroundcolor:black; color:green;}. Et tout ça en juste 2 propriétés à changer ! Alors qu'avec FrontPage il vous aurait fallu changer les couleurs pour chaque zone, soit des centaines de fois ! Et si ça vous plait pas, bon courage pour essayer autre chose pour voir ce que ça fait ! Là vous pouvez mettre le fond rouge, regarder, changer, réessayer, ... un vrai délice !

Vous voilà récompensés si vous avez eu le courage de lire jusqu'ici. Mais le meilleur reste à venir.

Les classes

Le CSS avec ce que j'ai expliqué, c'est bien, mais ça ne fait pas tout. En effet, certains paragraphes peuvent être plus importants que d'autres.

Mais ça reste des paragraphes.

Alors comment faire en sorte que certains objets/boites soient formatées d'une certaine manière, et d'autre d'une autre manière ? Réponse : les classes. Ecrivez < class="unnom">...</p> (idem avec les autres balises).

Dans le fichier CSS : p {color:blue;} et p.unnom {color:red} différencierons les paragraphes. On peut imaginer par exemple, les paragraphes de classes "normal", "conseil" et "attention". Mais quitte à faire ce peu, autant ne pas mettre de classe "normal" (laisser <p>) et mettre p {...} dans le fichier CSS. Comme ça on n'est pas obligé de taper <p class="normal"> partout.

Une balise peut être dans plusieurs classes à la fois. Il suffit d'écrire <p class="nomclasse1 nomclasse2 ..."> pour pouvoir profiter des attributs de chacunes des classes.

Par exemple le paragraphe encadré en rouge est de class "attention" et j'en ai un peu partout sur mon site.

Les id

C'est un peu comme les classes sauf que si plusieurs balises peuvent être affiliées à la classe "maclasse", un id doit être unique (pour un fichier html donné). C'est un identifiant. Ça sert moins souvent, et à vrai dire c'est surtout quand on veut associer du Javascript à notre site, ou alors pour placer des éléments. Un peu comme mon menu sur la gauche : l'attribut de la balise est id="menu".

(Mais... cot cot cot codec c'est pas parce que je l'appelle "menu" que le navigateur le place tout seul comme un grand sur la gauche ! J'aurais pu l'appeler "toto" ça ne changerait rien, ce serait à moi de gérer cet effet.)

Les éléments div et span

Dernière chose pour profiter pleinement du CSS : les balises span et div. Elles sont là juste pour créer des boites qui contiennent d'autres boites. Ce sont un peu des super boites si vous préférez. Mais elles restent quand même dans la méga-boite body. Elles servent à regrouper les éléments par "paquets" si vous voulez.

Les div agissent sur les boites externes : paragraphes, listes, tables, ... tandis que les span encadrent surtout les mots, les liens, ... bref tout ce qui est à l'intérieur d'un paragraphe.

Les div servent à placer les éléments. Par exemple toutes les pages de mon site ont 3 div. Le premier contient le menu sur la gauche en violet. Le second contient le corps de la page (sur fond beige pale) et le troisième les petits logos en bas à gauche. Je mets donc ma dizaine de liens de mon menu dans un div, et après je dis que le div est en position:fixed; left:0px; top:30px;, (fixed pour qu'il ne défile pas quand on fait défiler la page). Le corps du text est dans un autre div en position:absolute; left:300px; background:#FAEBD7.

J'utilise les span pour dire que du texte est du code, quand ce n'est pas dans un <pre> (les gros bouts de code sur plusieurs lignes). Vous pouvez bien entendu mettre des div dans d'autres div. Ce sont juste des boites.

Dernières choses à savoir

Dans la feuille de style CSS vous pouvez affiner les balises que vous traitez. Exemple : vous voulez mettre en gros et blanc seulement les liens qui sont contenus dans une balise div de class "menu", comme sur ce site. Dans la feuille CSS écrivez div.menu a {color:white; ...}. CSS vous permet même de préciser les liens (pour prendre un exemple mais ça marche avec tout) qui sont directement dans un paragraphe (et non pas ceux qui sont dans une liste qui est elle-même dans un paragraphe). Ecrivez p > a {...}.

Vous pouvez aussi définir le style en ligne, dans votre fichier html : ça peut être plus pratique, par exemple quand j'ai mis le code en vert fluo sur fond noir, je ne me suis pas embêté à mettre un id et après à grossir mon fichier CSS. Non : j'ai fait <span style="color:green; background-color:black;">. Essayez de le faire que très très rarement pour ne pas acquérir cette mauvaise habitude et ne l'utiliser qu'avec parcimonie, et pas pour remplacer les id. Sinon votre fichier html va très vite devenir très sale et illisible.

a:hover {color:yellow; ...} : hover spécifie les liens au moment où la souris passe dessus. Ou comment créer des effets d'animation assez sympas sans code Javascript ni rien ! (a:visited pour définir les propriétés des liens où l'on a déjà cliqué)

Conseils

Il y 3 moyens de spécifier les dimensions, pour le positionnement : en pixels, pourcentage ou em. Ex : left:30px; ou left:20% ou left:5em;. Je vous recommande très fortement de n'utiliser que ces 2 derniers moyens pour les longueurs. "em" se lit "M" et c'est normal. C'est la taille en largeur d'un caractère M. Ces 2 dernières méthodes ont l'avantage d'être auto-ajustables : quelqu'un qui a un petit écran, ou qui a comme taille de caractère par défaut une grosse taille parce qu'il est myope vous sera reconnaissant. (Et surtout pour des questions de redimensionnement de votre fenêtre).

Idem pour font-size : on peut écrire font-size:12px; ou font-size:medium, large, small, x-large, xx-large, ... Cela veut dire que vous pouvez préciser votre taille de fonte en absolu ou en relatif. Préférez le relatif, encore une fois. (medium, puis large pour les titres h2 et x-large pour les titres h1 par exemple). Ça compte beaucoup pour les gens qui ont une résolution d'écran spéciale ou tout simplement qui aiment bien avoir leur petite config perso.

Je sais que le tutoriel est un peu court, mais c'est normal, c'est la façon dont ça fonctionne. Le tutoriel est là pour vous donner une bonne vue d'ensemble, je ne vais pas définir les centaines de propriétés possibles du CSS. Quand vous chercherez à faire quelque chose de précis, vous trouverez la réponse sur d'autre sites au coup par coup en cherchant avec Google.

Il faut savoir que vous passerez de toutes façons beaucoup de temps à régler quelques petits détails de design sur votre site, et que quand ça sera fini il y a de fortes chances pour que ça ne s'affiche pas exactement pareil sur IE, Chrome, Firefox, ...

JavaScript

J'essaye de l'utiliser le moins possible, parce que l'on peut le désactiver sur son navigateur (pour ne pas recevoir de popup, ...) et les gens qui l'ont fait doivent quand même pouvoir voir votre page.

Javascript sait bien faire :

Le Javascript se tape dans un fichier monfichier.js, et que vous mentionnez dans le header de votre doc html en écrivant : <script type="text/javascript" src="monfichier.js" > </script>. Vous tapez vos fonctions dedans, et après depuis votre doc html vous appelez ces fonctions : <script type="text/javascript">mafonction();</script>. Bien entendu rien ne vous oblige à avoir un fichier séparé, surtout si votre fonction ne fait que quelques lignes.

Pour écrire sur le document, à l'endroit où il y a le script : document.write('votre texte ici');. Il faut bien sur encore mettre des balises, ... quand vous mettez du texte avec Javascript. ex : document.write('<h1 class="maclasse">Mon titre</h1><p>un paragraphe</p>');

Exemples d'utilisations :

  • Dans un fichier CSS, vous vous faites la classe pair et la classe impair pour les paragraphes. (l'un avec color:red l'autre color:blue). Et en javascript vous faites "Si day = 0 modulo 2" alors write class="pair" sinon write class="impair"" (Tout ça en "vrai" code bien sur). Comme ça votre "design" change un jour sur 2. (je vous laisse le soin d'approfondir)
  • Vous voulez écrire 1, 2, 3, ... jusqu'à 1000 pour une raison qui m'est inconnue. Ecrivez : for (var i = 1; i < 1000; i++) {document.write(i + ", ");}.
  • Changer un attribut : var objet = document.getElementById("un_id"); objet.setAttribute("class", "unnomdeclasse");. Avec cette technique vous pouvez faire beaucoup, mais alors beaucoup beaucoup de choses. Exemple : quand on clique sur quelque chose, ça appelle cette fonction où unnomclasse est une class qui met les objets en visibility:hidden. Et bien avec ça quand vous cliquez ça cache quelque chose ! (et si vous recliquez ça peut le rechanger)
  • Gestion des événements : dans une balise quelconque (paragraphe, lien, div, ...), qui a une class ou non, mettez onclick="f();". Ceci aura pour effet d'appeler la fonction f() javascript, définie dans votre fichier lié, ou sur votre fichier html. Exemple : (<a href="http://www.google.fr" onmousemove="alert('vous allez peut etre cliquer');">)

Vous l'avez compris maintenant j'espère, JavaScript, HTML et CSS sont très liés ! Quand il y a un événement, vous le traitez avec JavaScript. Le code javascript va modifier la structure html (par le biais de SetAttribute le plus souvent) (sachez pour votre gouverne qu'il existe GetAttribute) et ceci va modifier automatiquement l'apparence, grâce au CSS ! Génial, non ?

P.S : si les fonctions de votre fichier lié n'ont pas accès à 'document', donnez-le en argument : f(document); comme ça elles pourront écrire dessus.

P.S bis : la fonction getElementById est peut-être le seul intérêt des id. Mais n'en mettez pas partout non plus, juste là où il faut de l'animation.

PHP / MySQL

Je ne vous conseillerai que trop l'excellent site du zéro qui m'a permis d'apprendre le php. Avant de vous aventurer dans cette jungle, je vous dis juste 2-3 choses pour vous aider à garder les idées claires

  1. Le php s'exécute sur le serveur et donc pas chez vous. Il crée la page web et vous l'envoie. Vous ne recevez donc que du html/css/javascript. La page peut donc être personnalisée.
  2. Le php écrit dans le document un peu comme javascript. Il peut donc écrire des balises, ... ou du code javascript ! Et donc c'est un code (php) générateur de code (Javascript) lui-même générateur de code (HTML)
  3. La grande puissance du php réside dans une gestion facilitée des bases de données. Une base de données c'est comme un tableau Excel : vous avez des colonnes et des lignes. Par exemple pour mon blog, j'ai les colonnes "texte", "date", "titre", "nombre de lectures". Le php vous permet aussi grâce aux bases de données de mémoriser les adresses ip des visiteurs et le nombre de visites reçues.

Choses à retenir

.htaccess

Le fichier .htaccess vous permet de faire plein de choses sur le serveur, en particulier :

  1. Restreindre l'accès à un fichier ou à un dossier, en demandant un nom d'utilisateur et un mot de passe
  2. Modifier l'url et beaucoup de choses.

Même s'il peut y avoir un .htaccess par dossier (suivant les protections que vous souhaitez), le fichier .htaccess se place souvent dans le même dossier que votre page d'accueil, à la racine du site donc.

Il y a quelques grands cas d'utilisation pour modifier une url. Parmi ceux-ci :

  1. Vous aviez un ancien nom de domaine et vous voulez rediriger tout le monde qui va dessus vers votre nouveau site.
  2. Vous avez renommé une page de votre site. Vous voulez que les anciens liens pointent maintenant vers la bonne page.
  3. Vous voulez avoir de "belles" url. Au lieu de http://monsite.fr/blog.php?date=janvier&article_id=3 vous voulez qu'il suffise de taper http://monsite.fr/blog/janvier/3.

La bonne nouvelle c'est que tout est possible et assez compréhensible. D'autre part les moteurs de recherche comme Google voient que vous faites des redirections d'une gpage vers une autre et mettent à jour leur base de données en conséquence.
La mauvaise nouvelle c'est qu'il faut s'arracher un peu les cheveux pour que tout fonctionne, et que sur certains serveurs ça ne marche pas exactement avec le même fichier que sur d'autres (serveurs de votre hébergeur et localhost par exemple), et que certains serveurs, ceux de Free notamment, interdisent certaines commandes, ce qui est entre nous normal vu qu'on ne paye pas chez Free.

Un exemple de fichier .htaccess :

# les lignes commençant par un dièze sont des commentaires de fichiers .htaccess
# pour rediriger votre site sur un autre
Redirect permanent /anciennepage.php http://nouveau-domaine.fr/uneautrepage.php
# pour rediriger une page renommée vers une autre
Redirect permanent /anciennepage.php /nouvellepage.php

# les 2 lignes qui suivent sont à mettre si l'on veut utiliser RewriteRule
Options +FollowSymlinks
RewriteEngine On
# pour faire des "beaux url". $1 sera remplacé par la première expression régulière matchée par les parenthèses.
# ex : http://toto.fr/blog.php/titre-d-un-post sera redirigée de manière transparente vers http://toto.fr/blog.php?message=titre-d-un-post
RewriteRule ^blog.php/(.*)$ /blog.php?message=$1 [L]

# idem, si vous voulez rediriger une page renommée en une autre et que l'ancien nom comportait des requêtes POST,
# les expressions régulières ne peuvent pas filtrer les points d'interrogation, donc il faut faire RewriteCond, une sorte de "if"
# ici on redirige blog.php?id=3 vers blog.php?message=elections-presidentielles-2012.
# si vous faites un site et que 2 ans plus tard vous voulez changer l'architecture de votre site,
# vous pourrez toujours changer et faire en sorte que les vieux liens fonctionnent encore
RewriteCond %{QUERY_STRING} ^id=3$
RewriteRule ^blog.php /blog.php?message=elections-presidentielles-2012 [R=301,L]

Pour faire des url encore plus beaux : article sur mon blog sur les beaux urls.

Les serveurs n'ont pas tous la même configuration, ainsi un .htaccess qui fonctionnera chez vous en local ne fonctionnera peut être pas chez votre hébergeur ! Il faudra peut être ajouter des slashs devant des points / des parenthèses, ..., par exemple remplacer xxx.php par xxx\\.php. Sur certains serveurs, il faudra aussi mettre des slashs DEVANT le nom des pages :

RewriteRule ^blog/(.*)$ /blog.php?page=$1 [L]
...
RewriteRule ^([^/]*)$ /$1.php

Ecrivez votre .htaccess morceaux par morceaux, commentez certaines lignes (avec #) pour déboguer et voir quelle syntaxe votre serveur reconnait.

Protéger un dossier

Mettez un nouveau fichier .htaccess dans le dossier à protéger.

AuthName "Page protegee"
AuthType Basic
AuthUserFile "uneadressecompliquee/.htpasswd"
Require valid-user

L'adresse à mettre est une adresse interne utilisée par votre hébergeur. Elle est donnée par la fonction php echo realpath('index.php');. Si vous êtes client de 1&1.net, cette adresse est quelque chose comme /homepages/01/a1232343453/htdocs/

Dans le fichier .htpasswd (que vous mettrez en fait à la racine de votre site) :

thomas:sdqfjsqdfklqsdfj
maman:lkfjsldkfje
papa:lfsqldfj

Vous mettez en fait une liste utilisateur:motdepassecrypté. La fonction php echo crypt("mot de passe"); donne le mot de passe crypté. Quand vous essayerez d'utiliser un fichier du dossier, on vous demandera un nom d'utilisateur et un mot de passe. Le mot de passe sera crypté et comparé au mot de passe crypté lui aussi du fichier .htpasswd.

Protéger certains fichiers

Pour protéger tous les fichiers avec l'extension .zip par exemple :

AuthName "Zone protégée"
AuthType Basic
AuthUserFile "uneadressecompliquee/.htpasswd"
<Files ~ "\\.(zip)$">
Require valid-user
</Files>

Personnellement je rajoute .protege à l'extension des fichiers que je veux protéger et je protège les fichiers d'extension .protege. Il suffit après téléchargement de supprimer l'extension.

Les fichiers .htaccess offrent en fait de plus amples possibilités mais je pense qu'il est recommandé, pour les "petits sites", d'avoir 1 seul fichier .htpasswd à la racine de son site avec juste quelques utilisateurs. Inutile de faire référer votre .htaccess à des fichiers .htpasswd différents à chaque fois. Si vous en avez VRAIMENT besoin, regardez du côté des groupes d'utilisateurs et définissez des permissions au niveau de ces groupes. Attention aux maux de tête.

Référencer son site

Référencer son site c'est faire en sorte qu'il soit connu par les moteurs de recherche (Google, Bing, ...). Votre classement sur une recherche par mots clés dépendra d'une multitude de critères mais les principaux sont :

Inutile de tricher

Vous n'êtes pas le premier à y penser, et les gens qui font les algorithmes pour noter votre site le savent. Si vous avez deux sites qui se pointent mutuellement les uns les autres et que votre site est tout pourri, Google va s'en rendre compte. Si vous avez des pages avec écrit en blanc sur fond blanc des centaines de mots clés pour pouvoir être dans toutes les recherches, Google va le savoir aussi.

A faire

google analytics

Un petit aperçu de ce que Google analytics me donne pour mon site sur le japonais : nombre de pages vues, par qui (on peut zoomer et savoir même ville par ville combien on a de visiteurs !!!!), combien de temps les gens passent sur le site, si l'on a des liens morts, ...

Gagner de l'argent

Il existe plusieurs moyens de gagner de l'argent avec son site web. C'est un peu le rêve de beaucoup de gens, avoir un site qui "tourne tout seul" et rapporte un peu chaque mois. Sachez seulement qu'avec le nombre de sites internet, la concurrence est rude et que vous ne gagnerez que si vous dépassez 10 à 100 milles visiteurs par mois. En deçà, à moins d'avoir de la "chance", cela vous coûtera plus cher en hébergement que cela ne vous rapportera (compter environ 100 € par an de coûts). Enfin sachez qu'avoir un site web c'est assez "prenant". Si vous avez un blog il faut le faire vivre, écrire des articles régulièrement, faire évoluer votre site internet avec la technologie, ...

Trève de paroles, voici les différents moyens :

Coût par affichage
On vous rémunère à chaque fois qu'une publicité est affichée sur votre page.
Coût par clic
On vous rémunère à chaque fois qu'un visiteur clic sur l'une des publicités.
Affiliation à un site marchand
On vous rémunère à chaque fois qu'un visiteur clic sur l'une des publicités et achète quelque chose sur le site derrière ou bien s'il "crée un compte". Ça peut être très rentable mais si notre bannière envoie sur une promo et que la période de promo s'arrête, le lien ne fonctionne plus. Il faut vérifier régulièrement que tout fonctionne.
micro paiement
Votre site est gratuit sauf certaines parties où il faut payer un abonnement ou une somme forfaitaire pour y avoir accès. En quelque sorte il y a les membres "Premium" qui payent pour plus de service.

Dans tous les cas vous devrez vous inscrire auprès de régies publicitaires. Ces régies sont un intermédiaire entre les sites marchands et vous. Vous vous inscrivez, donnez vos coordonnées bancaires pour quand vous ferez de l'argent, et vous avez accès aux pubs des sites marchands. Vous les mettez sur votre site, et quand l'utilisateur clique, que c'est affiché, ... il y a un petit id dans le lien / la pub qui dit que c'est vous qui avez amené le visiteur et que c'est votre compte qu'il faut créditer.

Le mieux est de choisir les annonceurs qui ont un rapport avec votre site, de bien cibler vos pubs, leur emplacement, et de ne pas mettre de bandeaux publicitaires tous pourris qui clignotent, sinon 1/ les gens ne vont pas cliquer dessus et 2/ ils ne vont pas apprécier venir sur votre site et n'y reviendront pas. N'oubliez pas qu'il vaut mieux un beau site avec beaucoup de traffic qu'un petit site pourri avec des pubs partout et pas d'utilisateurs.

Exemple de pub qu'il ne faut pas mettre partout ,même si elle reste relativement dans le contexte :

À lire aussi :
Laissez un commentaire !

Pas besoin de vous connecter, commencez à taper votre nom et une case "invité" apparaîtra.