Edition septembre 2016.
Page 1/3.

Bienvenue à ce tuto pour créer un site Internet.

Vous êtes NUL en ordi. Pas de souci, cette page est faite pour vous.

Plutôt que de vous expliquer de manière abstraite, nous allons prendre un exemple très concret: Nous allons construire ensemble un site qui sera un vide-greniers en ligne où il y aura donc des gens qui exposeront leurs objets à vendre et des visiteurs qui chinent. Pour créer ce site interactif, nous utiliserons le langage "html" pour le contenu, le langage "css" pour le design, le langage "php" pour le coté interactif du site et enfin le langage "MySqli" pour l'usage des données.

Pour vous permettre de bien visualiser la différence entre ces 4 langages cités ci-dessus. Je vous propose de comparer un site Internet avec le fait de faire du café: Le contenu de l'écran (html) est le café que vous voyez dans votre tasse. Le design (css) est la tasse, le bol ou le gobelet... etc... dans lequel se trouve votre café. L'interactivité du site (php) est la machine à faire le café avec ces différents boutons expresso, décaféiné... etc... L'accés à la base de donnée (mysqli) correspond aux tuyaux qui pompent les ingrédients nécessaires à la fabrication du café. La base de donnée (sql) est le stockage de vos ingrédients: Les différents grains de café, l'eau, sucre, lait... etc...

Je vous propose de commençer d'abord par créer dans votre ordi un dossier qu'on va nommer "VideGrenierA" dans lequel on va mettre tous les elements qui vont constituer notre site Internet. Notre première version s'appelle "VideGrenierA". Plus tard, si vous faites des modifications, vous pourrez les faire dans un copié/collé de ce dossier que vous apellerez "VideGrenierB"... Et ainsi de suite... Cela vous donnera l'avantage de pouvoir revoir la version précédente si nécessaire.

Dans ce dossier, on va créer un document texte qu'on va nommer "index". Toutes les pages d'accueil des sites Internet s'appelle ainsi et nullement autrement. Vous ne devez pas choisir un autre nom !!!

Dans ce document texte, je vous invite à copier/coller le code qui se trouve ci-dessous. Je vous expliquerai plus tard son contenu.

<h1>Bienvenu au vide-greniers.</h1>

Vous sauvegardez et vous fermez votre document texte. Ensuite, vous remplacez l'extension ".TXT" de votre document texte par l'extension ".html" et hop, vous avez créer votre première page Internet comme l'illustre la photo ci-dessous.

Double cliquez sur votre icon; Votre navigateur Internet se mettra en route et vous pourrez voir le titre de notre page d'accueil de site qui dit: "Bienvenu au vide-greniers." Magique, non? Clin d'oeil

Petite explication: Les symboles suivants < > ou { } ou [ ] ou ( ) sont utilisés pour encadrer une action.
En html, on utilise les symboles < > pour toute action html.

<h1> annonce le début du titre et </h1> annonce la fin du titre. On appelle ça des balises. Il existe 6 tailles de titre: <h1> <h2> ... jusqu'à <h6>. <h1> donne la plus grande taille et <h6> donne la plus petite taille de titre.

Si vous êtes séduit et que vous voulez continuer, je vous invite alors à télécharger un editeur de code comme PSPad ou NotePad. Cela vous évitera ma petite tricherie de ci-dessus qui consiste à modifier l'extension du ".TXT" vers ".html" ou vice versa à chaque fois qu'on veut modifier le code d'une page html au cours de sa construction. Un clic à droite sur le document html vous permettra d'ouvrir l'éditeur de code. Le clic à droite est la porte pour les artistes et techniciens du spectacle alors que le double clic à gauche est la porte d'entrée principale pour les spectateurs. Clin d'oeil

Le code que je vous ai donné ci-dessus marche mais... Pour être dans les règles de l'art, il faut en rajouter un peu: Il est bon de mettre un "DOCTYPE" comme illustré ci-dessous dans les 2 premières lignes. Ne cherchez pas trop à comprendre, mettez juste ces 2 lignes en tête de chacune de vos pages html. Ensuite, il faut annoncer proprement votre page avec la balise

<html> et vous remarquerez la balise </html> qui cloture la page. La plupart des balises fonctionnent par paire. Ensuite il y a la tête <head> </head> et le corps <body> </body>. Vous remarquerez la seconde paire qui ferme un peu après. Dans la tête, on y met des infos utiles au serveur avec, en autres, des balises <Meta ... /> qui ne vont pas par paire et finissent donc par un espace suivi du "/". Vous y remarquerez une balise <Link ... /> qui fait référence au document css nommé "Netbook" qu'on va créer plus tard pour soigner le design de notre page. Vous y remarquerez aussi les balises <title> et </title> pour le contenu de l'onglet en haut de votre page Internet. Au fait, choisissez bien les mots de votre "title" puisque ceux-ci seront ciblés par les moteurs de recherche.

Dans le corps, on y met les infos pour le visiteur. On y retrouve nos premiers mots de code (en gris clair):

<h1>Bienvenu au vide-greniers.</h1>

Je vous invite à regarder le code ci-dessous et à le copier/coller pour compléter votre page d'accueil. Pour plus d'infos, vous pouvez consulter le site français developpez.com ou le site anglais w3schools.com que je trouve très pédagogue.

Voici ci-dessous le code de votre document: index.html

Maintenant, avant de continuer, il est bon d'imaginer le design global de la page. Je vous propose une page divisée en deux: Les infos à gauche et un bandeau vertical d'espace publicitaire à droite. Dans notre espace à gauche, on y mettra le titre, une boite pour les chineurs et une autre boite pour les vendeurs comme l'illustre la photo ci-dessous:

Pour le design de la page, on va utiliser le langage "css" qu'on mettra dans un document css. Je vous invite à copier / coller le code ci-dessous et à le mettre dans un nouveau document texte qu'on va nommer "Netbook". Puis vous remplacerez l'extension ".TXT" par ".css" pour obtenir un document css. Pensez à faire attention aux majuscules et aux minuscules. En effet, "Netbook" n'est pas égal à "netbook".

Voici ci-dessous le code de votre document: Netbook.css

body {background-color:#F7F7F7;} a:link {text-decoration:none; color:Blue;} a:visited {text-decoration:none; color:BlueViolet;} a:hover {text-decoration:underline;} .MiniBlack {font-size:0.8em; color:black;} .Red {color:red;} .Green {color:green;} div {font-family:"tahoma";font-size:1em;text-align:center;color:#0070C0;} div#Wrap {width:980px; margin:10px auto;} div#LeftBloc {width:760px; float:left;} div#RightBloc {width:200px; float:right; margin-left:20px;} div#Chineur {width:738px; background-color:#FFFFBF; padding:10px; margin-bottom:20px; border-radius:30px; border:1px solid; box-shadow:-5px 5px 0px #0070C0;} div#Vendeur {width:738px; background-color:#BFFFBF; padding:10px; margin-bottom:20px; border-radius:30px; border:1px solid; box-shadow:-5px 5px 0px #0070C0;}

Petites explications du code qui se trouve ci-dessus:

La première ligne indique la couleur du fond d'écran. Les 2eme, 3eme et 4eme lignes indique la déco et la couleur des liens vers d'éventuels autres pages de notre site. Les lignes ".MiniBlack", ".Red" et ".Green" sont appelés des "class". Dans le cas présent, Elles indiquent un style particulier de charactères qu'on utilisera plus tard. Ensuite, la première ligne des "div" indique les spécificités communes à tous les autres "div": Type de charactère, taille des caractères, l'alignement du texte et enfin sa couleur. Toutes les autres lignes "div" indiquent la taille de nos différents espaces ou compartiments qui composeront notre page. Remarquez le point virgule qui ferme une phrase de code tout comme on ferme une phrase avec un point dans notre langage humain. Attention, en langage informatique, l'oubli d'un point virgule, d'une virgule, d'un apostrophe ou d'un point ... etc... Et ça plante tout. Pour plus d'infos sur la mise en page avec css, je vous invite à cliquer ici pour aller sur un site français très simple qui explique cela très bien.

Pour plus d'infos sur un bout de code particulier, vous pouvez entrer sa catégorie (html, css, php ou mysqli...) puis le bout de code en question sur google et vous trouverez certainement des sites qui vous expliqueront les détails.

Maintenant, je vous invite à réouvrir votre document nommé "index.html" avec votre éditeur de code. Effacez tout son contenu et copiez / collez le code ci-dessous pour obtenir la page d'accueil illustrée un peu avant:

Voici ci-dessous le nouveau code de votre document: index.html

Petites explications des quelques lignes rajoutées (en jaune) dans notre code qui se trouve ci-dessus:

On fait référence à nos divers compartiments avec les balises

<div></div> qu'on met dans l'ordre chronologique de la lecture du code. Vous pouvez remarquer le compartiment global <div id="Wrap"></div> qui contient le compartiment <div id="LeftBloc"></div> et le compartiment <div id="RightBloc"></div>. On peut aussi remarquer le compartiment <div id="LeftBloc"></div> qui contient nos 2 autres compartiments <div id="Chineur"></div> et <div id="Vendeur"></div>. On peut remarquer aussi le compartiment <div id="RightBloc"></div> qui contient le bout de code <img src="Pub.jpg" alt="Publicité" /> qui nous permet de mettre la photo de pub.

Mince alors, vous n'obtenez pas tout à fait l'écran désiré et vous obtenez l'écran ci-dessous:
Ne vous inquiétez pas! On va voir ça tranquillement.

En effet, il se peut que vous obteniez un point d'interrogation à la place des lettres avec accentuation. Ceci est lié au format d'encodage par défaut de votre document d'origine ".TXT" qui est encodé en "ANSI". Mais puisqu'on a spécifié dans la "head" de notre page html que nous souhaitons le format international "utf-8", il faut aussi que notre page elle-même soit encodé au format "utf-8". Pour cela, ouvrez votre page html nommée "index.html" avec votre éditeur de code et sélectionez "utf-8" dans l'onglet format comme l'illustre la photo ci-dessous:

Ensuite, la photo de pub n'apparait pas. C'est normal. En effet, pour le moment, votre dossier "VideGrenierA" ne contient que 2 élements: "Netbook.css" et "index.html" comme l'illustre la photo ci-dessous:

Il faut rajouter dans votre dossier "VideGrenierA" la photo de pub comme l'illustre la photo ci-dessous:

Pour cela vous pouvez la créer ou vous pouvez aussi copié cette photo en la prenant ici sur mon site. Il vous suffira de cliquer à droite pour enregistrer l'image dans votre dossier "VideGrenierA".

Voilà, si vous double-cliquez sur votre page "index.html", vous allez maintenant obtenir l'écran désiré comme ci-dessous:

Bon... génial !!!

Maintenant, il faut penser à adapter notre écran pour un smartphone par exemple. Je vous propose simplement de mettre alors nos différents compartiments les uns au dessus des autres avec la pub en dernier et non plus alignée à droite.

Pas de panique, nul besoin de faire une autre page html d'accueil. On va juste remplacer dans notre "head" de notre document "index.html" la ligne de code suivante:

par les 3 lignes suivantes:

Petites explications de ces 3 lignes qui se trouvent ci-dessus:

Ne cherchez pas à comprendre la première ligne pour le moment. La 2eme ligne fait référence à notre document "Netbook.css" si la largeur d'écran minimale est de 980 pixels et la 3eme ligne fait référence à un autre document css nommé "Smart.css" si la largeur d'écran maximale est de 979 pixels: Tablettes et smartphones.

Il ne nous reste plus qu'à créer ce document "Smart.css". Pas de panique, on va simplement copier / coller "Netbook.css" et on renommera sa copie "Smart.css". Ensuite, on va modifier son contenu ou plus simple encore: Vous copiez / collez le code ci-dessous:

Voici ci-dessous le code de votre document: Smart.css

body {background-color:#F7F7F7;} a:link {text-decoration:none; color:Blue;} a:visited {text-decoration:none; color:BlueViolet;} a:hover {text-decoration:underline;} .MiniBlack {font-size:0.8em; color:black;} .Red {color:red;} .Green {color:green;} div {font-family:"tahoma"; font-size:1em; text-align:center; color:#0070C0; border-radius:30px;} div#Wrap {width:100%; margin:10px auto;} div#LeftBloc {} div#RightBloc {} div#Chineur {background-color:#FFFFBF; padding:10px; border:5px solid; margin-bottom:15px;} div#Vendeur {background-color:#BFFFBF; padding:10px; border:5px solid; margin-bottom:15px;}

Votre dossier "VideGrenierA" contient donc maintenant 4 éléments comme l'illustre la photo ci-dessous:

Et bien voilà, notre site "vide-greniers" s'adapte maintenant aux tablettes et smartphones. Vous pouvez le vérifier en augmentant le zoom en haut à droite dans le coin de votre navigateur Internet.

Finissons maintenant le contenu de notre page d'accueil en ajoutant les formulaires d'entrée de données.

Voici le nouveau code (qui contient les formulaires) de votre document: index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <meta name="description" content="vide-greniers" /> <meta name="keywords" content="vide-greniers, vide greniers, vide grenier" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" media="screen and (min-width: 980px)" type="text/css" href="Netbook.css" /> <link rel="stylesheet" media="screen and (max-width: 979px)" type="text/css" href="Smart.css" /> <title>vide-greniers | vide grenier</title></head> <body> <div id="Wrap"> <div id="LeftBloc"><h1>Bienvenu au vide-greniers.</h1> <div id="Chineur"> <form action="index.php" method="post"> <h3>Que souhaitez-vous acheter ? <input type="text" name="Truc" maxlength="100" size="50" /></h3> <p>Dans quel endroit ? Code postal*: <input type="text" name="PostCode" maxlength="15" size="15" value="" />   <input type="submit" name="Search" value="OK" /></p> <span class="MiniBlack">* Optionel. Plus le code postal est complet et plus votre recherche se limitera à la zone délimitée par celui-ci.</span></form> </div> <div id="Vendeur"> <form action="Vendeur.php" method="post"> <h3>Vous souhaitez vendre ? Inscrivez-vous. C'est gratuit.</h3> <p>Entrez votre code postal: <input type="text" name="PostCode" maxlength="15" size="15" value="" /> et votre email*: <input type="text" name="VendeurMail" maxlength="50" /></p> <p>Choisissez votre mot de passe: <input type="password" name="PassWord" maxlength="15" />  <input type="submit" name="CreerCompte" value="OK" /></p> <span class="MiniBlack">* Attention! Votre adresse mail apparaitra sur l'écran pour permettre aux acheteurs de vous contacter.<br />A cause des spammeurs, nous vous recommandons de ne pas donner votre adresse mail principale mais une autre.</span></form> <hr /> <form action="Vendeur.php" method="post"> <h3><a href="Vendeur.php">Accédez à votre compte vendeur:</a></h3> <p>Email: <input type="text" name="VendeurMail" maxlength="50" />   Mot de passe: <input type="password" name="PassWord" maxlength="15" />   <input type="submit" name="LogIn" value="OK" /></p></form> </div> </div> <div id="RightBloc"><br /> <a href="Autre.php" target="_blank"><img src="Pub.jpg" alt="Publicité" /></a> </div> </div></body></html>

Et voilà, avec seulement 45 lignes de code, nous avons créer une page d'accueil d'un site Internet interactif.

Vous pouvez remarquez en gris clair les 3 lignes de codes ajoutées pour s'adapter aux smartphones.

Petites explications des quelques lignes ajoutées (en jaune): Nous avons nos 3 formulaires qui commence par

<form action="---.php" method="post"> et se cloture par </form>
Nous avons aussi les boites d'entrée du type: <input type="text" name="---" maxlength="100" size="50" />
ainsi que les boites pour mot de passe: <input type="password" name="PassWord" maxlength="15" />
Puis le bouton "OK" pour cliquer: <input type="submit" name="---" value="OK" />
Nous avons utiliser les balises <p> et </p> pour faire un paragraphe. Nous avons aussi utiliser <span class="MiniBlack"> --- </span> pour écrire des petites lettres en noir au pied de notre astérix en faisant référence à notre style "MiniBlack" défini dans notre document css. Vous pouvez aussi remarquez la balise <br /> qui permet un passage à la ligne suivante et la balise <hr /> qui trace une ligne droite horizontale. Nous avons aussi rajouter des liens vers d'autres pages avec les balises <a href="Vendeur.php"> --- </a> qui ouvre le lien dans un même onglet ou les balises <a href="Autre.php" target="_blank"> --- </a> qui ouvre le lien dans un nouvel onglet. Ah, j'allais oublier... La petite chaine de character   force l'ajout d'un espace sur l'écran.

Voici ci-dessous le look final de notre page d'accueil pour notre vide-greniers.

Bravo! vous êtes maintenant capable de créer le contenu et la mise en forme d'une page Internet grâce au langage html et css. Pour reprendre notre comparaison avec le café, vous êtes maintenant capable de créer la tasse (css) et son café (html). Maintenant, si vous appuyez sur vos boutons "OK", vous remarquerez que cela ne marche pas. En effet, avec les formulaires nous avons créer l'enveloppe de la machine à café mais nous n'avons pas mis tous les fils et moteurs électriques qui constituent l'intérieur de la machine. Pour cela, nous utiliserons le langage php et mysqli.

Bienvenue à ce tuto pour créer un site Internet.

Vous êtes NUL en ordi. Pas de souci, cette page est faite pour vous.

Cliquez ici pour accéder à la deuxième partie de ce tuto qui vous montrera comment créer le coté interactif de notre site "vide-greniers".