Pour vous consolider vos acquis en matière de création de site, je vous recommande un livre de Sonia BAIBOU : Oh my code ! Je crée mon premier site Web. Certainement le meilleur ouvrage publié sur le sujet !
Je vous fais part du texte placé en 4e de couverture…
PLONGEZ DANS LE CODE MAIS SANS VOUS NOYER !
Je veux apprendre à coder, mais par où commencer ? Par ce livre qui va vous initier au développement web, au travers d’un projet de création de site Internet avec HTML, CSS et JavaScript. Textes, images, liens, design responsive, tout y est pour faire de ce projet fil rouge, éprouvé et approuvé en ateliers de coding, un véritable condensé de connaissances.
Conçu spécialement pour les débutants et les débutantes en programmation, souhaitant découvrir l’envers du décor d’une façon 100% pratique, cet ouvrage qui va droit au but vous délivrera un contenu de qualité et d’une grande pédagogie, héritée de l’expérience de formatrice de son auteur. Il s’adresse à tous les curieux du code, que ce soit pour de nouvelles perspectives professionnelles, une reconversion ou par défi personnel.
C’est clair, le ton est sympathique, l’approche est très progressive et surtout, cela rejoint parfaitement ce que nous apprenons tout au long de la formation FCS ! Les illustrations sont nombreuses et toujours pertinentes, le site proposé en fil rouge est simple et motivant.
Le livre va beaucoup plus loin que le programme de la formation FCS, mais “c’est tout l’intérêt du bazar”… Vous pourrez progresser en toute autonomie, réviser sans vous prendre la tête et retrouver toutes les manipulations essentielles permettant de publier son site chez un hébergeur.
Vous avez vu dans des cours précédents comment utiliser des gabarits HTML-CSS pour personnaliser une page Web. Nous allons découvrir pendant ce cours un type de gabarit particulier, basé sur une feuille de style prête à l’usage : w3.css.
On nomme ce genre de feuille de style “un framework CSS”, ce qui pourrait être traduit par “une boîte à outils CSS”. En effet, tout repose sur un système de classes CSS pré-paramétrées que chacun utilise en fonction de ses besoins.
Il existe de nombreux frameworks CSS, le plus utilisé étant Bootstrap. Ce dernier peut d’ailleurs être pris en main en suivant les tutoriels publiés sur w3schools.com. Il en existe d’autres, moins utilisés, comme Pure CSS ou Butter Cake.
Le framework W3.CSS a été mis au point par les concepteurs du site w3schools.com. Ce site d’apprentissage des techniques fondamentales de la création de site utilise cette feuille de style.
Découvrez l’essentiel des possibilités offertes par W3.CSS en lisant la présentation des fonctionnalités du framework (en cliquant sur le visuel ci-dessus).
Naviguer sur le site w3schools.com
➜ Pour le bon déroulé de la formation, je vous recommande de vous familiariser avec la structure du site w3schools.com.
Ce site s’affiche par défaut en anglais… et c’est très bien ainsi. Si vous demandez une traduction en français, le code source utilisé sera traduit en français et les informations transmises seront alors erronées. Revenez à l’anglais pour afficher le code correctement.
➜ Ce site permet d’apprendre de manière autonome à utiliser plusieurs techniques de création de sites. Vous y trouverez notamment une rubrique intitulée HOW TOqui regroupe des tutoriels répondant à de nombreux besoins.
Vous trouverez sur ce site des quizz et des exercices vous permettant de tester vos connaissances en HTML et CSS. Vous y découvrirez aussi des démos et des gabarits de sites réalisés en appui sur la feuille de style w3.css.
J’ ai rassemblé dans plusieurs dossiers les gabarits proposés par w3schools. Vous disposerez ainsi de plusieurs gabarits de portfolios et de quelques gabarits de sites à personnaliser selon vos besoins. Tous les gabarits proposés fonctionne avec la version 4 de w3css.
J’ai modifié les originaux à des degrés divers. J’ai parfois commenté le code et modifié une partie des contenus. Les gabarits de porfolios révisés sont les plus aboutis.
➜ Jetez un œil sur les différents modèles proposés mais ne vous attardez pas sur le code source. Vous travaillerez à partir de ces gabarits après vous êtes familiarisés avec W3.CSS. Je vous montre pour le moment ce vers quoi nous allons tendre au fil de la formation 😉
D’autres gabarits proposés par w3schools ont été rassemblés. Ils vous sont présentés sur ce site où vous pourrez passez facilement de l’un à l’autre. Pour les utiliser, vous devez les télécharger.
➜ Comme pour les portfolios révisés, ne vous attardez pas sur le code source des gabarits téléchargés.Prenez juste connaissance des modèles proposés et testez leur navigabilité et leur réactivité. Nous en utiliserons quelques uns pour les exercices qui vont suivre.
On nomme “bac à sable” un espace de test, d’exercice et de tâtonnement. Le site w3schools.com dispose d’un outil très pratique pour s’exercer en ligne sans recourir à VS Code ou à tout autre éditeur de texte. Vous y accédez chaque fois que vous cliquez sur le bouton « Try It yourself » (« Essayez vous-même », en français).
Vous pouvez enregistrer vos exercices ou vos tests en cliquant sur la disquette, dans le menu de l’éditeur.
➜ Pour sauvegarder vos exercices vous devez créer un compte gratuit chez w3schools. Vous disposerez alors d’un espace d’archivage accessible avec vos identifiants.
Les classes CSS
Vous l’avez compris : la feuille de style w3.css est une grande liste de classes CSS. Tous les noms de classe commencent par w3-. Il est ainsi envisageable de les combiner avec d’autres classes ne commençant pas par w3-.
➜ Lisez attentivement le cours proposé par w3schools.com en cliquant sur l’onglet W3.CSS colors et faites des modifications dans le code proposé dans les “Try It Yourself”.
➜ N’oubliez pas de cliquer sur le bouton “Run” pour voir le résultat de vos expérimentations.
Vous trouverez les 30 couleurs disponibles pour le texte à cette adresse :
➜ Vous constatez qu’il est possible d’associer plusieurs classes à un même élément HTML et de définir ainsi un style complexe pour l’élément sélectionné.
Les bibliothèques et les thèmes chromatiques
En plus des couleurs par défaut paramétrées dans la feuille de style w3.css, le site w3schools met à notre disposition de nombreuses bibliothèques de couleurs.
Chaque bibliothèque doit être appelée dans l’entête de la page Web (par un “link” approprié) afin que les couleurs choisies s’affichent correctement. Je vous détaille la marche à suivre un peu plus bas.
➜ Vous pouvez visualisez dans un même document quelques bibliothèques chromatiques regroupées. Les couleurs des années 2024 et 2025 complètent désormais ces biblothèques. Comme pour les couleurs par défaut, les classes correspondantes définissent à la fois la couleur du fond et une couleur de texte par défaut.
Nous disposons également de plusieurs thèmes chromatiques. Il s’agit d’une déclinaison monochrome d’une couleur par défaut, paramétrée sous forme de classes comprenant 10 nuances supplémentaires pour chaque couleur.
➜ Là aussi, je vous propose de visualiser dans un même document quelques thèmes chromatiques regroupés. Soyez attentif à la manière dont sont déclinés les noms de classes de chaque nuance.
Le d de d3 ou d4 correspond à la première lettre de l’anglais “dark”. Le l de l3 ou l4 (il s’agit bien d’un L minuscule et non d’un i majuscule…) correspond à la première lettre de l’anglais “light”.
➜ Modifiez l’appel du thème chromatique dans l’exercice proposé sur “Tryit Editor” et constatez le résultat de cette modification.
➜ Je vous propose d’effectuer l’exercice suivant : il s’agit, à partir du nouveau thème chromatique que vous avez choisi précédemment de modifier l’ordre d’affichage des nuances (le plus clair en bas et le plus foncé en haut.
➜ Pour la suite de cette formation je vous invite à utiliser un dossier “css” dans lequel se trouvent toutes les bibliothèques et tous les thèmes de couleurs proposées par w3schools (améliorés sur le plan des normes d’accessibilité). Les feuilles de style révisées sont placées dans les sous-dossiers « lib-colors » et “theme-colors”.
Remarque : il manque les couleurs ajoutées en 2025 à la version 5 de w3css ainsi que les bibliothèques des couleurs de 2024 et 2025. Vous pourrez les ajoutez vous-même pour compléter les ressources mises à votre disposition.
Pour utiliser les bibliothèques ou les thèmes chromatiques dans une page Web, il est nécessaire d’appeler la feuille de style correspondante dans un <link>, au niveau du <head> (ou au dessus du body quand il n’y a pas de balises <head>).
Soit on choisit de les appeler depuis les serveurs de w3schools avec un lien du type :
Je vous propose maintenant de personnaliser le gabarit de CV que vous avez téléchargé en début de cours (avec les autres gabarits). Vous pouvez le télécharger seul à l’aide du bouton ci-dessous.
Utilisez le thème chromatique de votre choix, placez votre photo ou l’image qui vous semble la plus appropriée, adaptez les textes à votre parcours professionnel…
Changer les icônes utilisée sur le CV
Le gabarit de CV proposé utilise les icônes de la bibliothèque Font Awesome version 4.7 (notez bien ce numéro de version…).
Comme pour des feuilles de style ou des polices Google Fonts, Les icônes sont appelées depuis les serveurs de Font Awesome. Vous trouvez le lien d’appel des icônes dans le head du code source.
➜ Repérez dans le code HTML les endroits où sont utilisées des icônes (entre balises <i> et </i>. Pour les modifier, changez simplement le nom des icônes. Vous trouverez toutes les icônes disponibles dans cette version de Font Awesome sur le site https://fontawesome.com/v4.7.0/icons/ 😉
➜ Dans un gabarit basé sur w3.css, n’utilisez pas le code proposé sur le site de Font Awesome ! Modifiez juste le nom de l’icône dans la portion de code source concernée.
Activer les liens sur les petites icônes du footer
Pour les plus perfectionnistes d’entre vous va se poser le problème de l’activation des liens en relation avec les icônes de réseaux sociaux, en pied de CV. Voici ce que Sophie a expliqué à Éléonore à ce sujet :
C’est comme quand tu insères un lien pour aller vers un site internet et que tu dois cliquer sur un texte pour y aller, dans ce cas là tu tapes :
<a href="https://copiercollerdunomdusite.fr">texte qui va supporter le lien</a>
Ça c’est la balise type.
Si tu ne veux pas que ce soit du texte cliquable mais plutôt une icône, il faut que tu « appelles » dans ta page l’icône (grâce à une feuille de style dédiée).
Ici les icônes sont déjà appelés(via une feuille de style fournie par le site FontAwesome.com et les classes qu’elle contient).
<i class="fa fa-linkedin w3-hover-opacity"></i>
Du coup, il suffit juste de mettre l’icône à la place de « texte qui va supporter le lien », ce qui donne :
Et bien sûr, tu mets un petit target= »_blank » (comme placé dans le lien que je viens de te montrer), pour que la fenêtre s’ouvre dans un nouvel onglet.
“Tout est dans le target !” a ajouté Sophie 😉
Grilles réactives avec w3.css
Quand vous aurez terminé de personnaliser le gabarit du CV, je vous invite à aller voir comment il est possible de rendre une page plus réactive (responsive) sur petits écrans.
La première solution proposée se trouve dans l’onglet W3.CSS responsive.
➜ Je vous propose un exercice, à faire en local, avec VS Code ou Phoenix Code.
W3.CSS est bien moins utilisé que Bootstrap. Il existe cependant plusieurs sites revendiquant leur appui sur cette boîte à outil assez simple à prendre en main. L’abondante documentation en ligne permet à des personnes autodidactes de produire des sites de qualité satisfaisante.
➜ Pour les trouver, avec Google ou Duckduckgo, saisissez entre guillemets “Made with w3css” ou “Powered by w3css ». Consultez à la fois les résultats “textes” et “images”.
Vous trouverez sur l’ancien support de cours une liste de sites réalisés avec w3.css. Quelques sites ne sont plus accessibles. D’autres ont évolué vers des présentations plus sophistiquées. Vous constaterez une nette prédominance de sites scientifiques.
Le framework CSS le plus utilisé est sans aucun doute Bootstrap. la courbe d’apprentissage de Bootstrap est cependant plus raide que celle de W3.CSS. Plusieurs articles comparent les 2 frameworks.
Le cours sur les frameworks d’Olivier Nocent, permet de se faire une idée des différences et des points communs entre les 2 boîtes à outils.
W3.CSS vs Bootstrap est un comparatif entre le ténor des frameworks CSS et le framework que vous venez de découvrir.
Dans ce cours, nous allons voir comment utiliser le logiciel Filezilla pour transférer le dossier d’un site simple, de notre poste de travail (en local) sur le(s) serveur(s) d’Alwaysdata.
Lors du cours précédent (Utiliser les services gratuits d’Alwaysdata), vous avez ouvert un compte gratuit chez l’hébergeur Alwaysdata. Je vous ai indiqué comment récupérer les paramètres de connexion FTP dont vous allez avoir besoin. Assurez-vous de les avoir à portée de main !
Rappel
Vous disposez maintenant de toutes les données de paramétrage pour pouvoir mettre votre site en ligne en utilisant le client FTP Filezilla.
➜ Si ce logiciel n’est pas installé sur votre poste de travail, je vous invite à l’installer dès maintenant, en veillant à installer Filezilla-client depuis l’adresse https://filezilla-project.org/download.php?type=client.
Attention, soyez très vigilants : l’adresse filezilla.org (sans le ”-project”…) est un site malveillant ! N’essayez même pas d’y aller !
Les tutos
Je ne vais pas réinventer le fil à couper le beurre, il existe de nombreux tutos en ligne pour apprendre à utiliser Filezilla. Voici ma sélection.
Les vidéos
L’installation de Filezilla
Dans la vidéo ci-dessous, l’auteur va droit au but, installe Filezilla et transfère un fichier PSD dans un dossier nommé “public_html”. Pour aller plus loin, nous sommes invités à regarder une autre vidéo… sur laquelle il envisage de nous montrer comment installer WordPress ! Ben non, cela ne nous concerne pas (… pas maintenant du moins) mais, pour tout ce qui nous est présenté, du début jusqu’au transfert du fichier PSD, je valide !
L’utilisation de Filezilla
Dans la vidéo suivante, tout commence bien puis l’auteur s’emmêle un peu les pinceaux avec les ports 21 et 22 et les protocoles ftp et sftp… mais pour la suite c’est impeccable. Le dossier public côté serveur est un dossier “www” (comme chez Alwaysdata)… cela nous va donc parfaitement. Validé !
L’auteur de la vidéo ci dessus (Fabien Numelion) propose sur sa chaîne YouTube d’autres vidéos susceptibles de vous intéresser…
Les tutos écrits (et illustrés)
J’ai repéré il y a déjà longtemps un article qui expose les choses de manière détaillée. Filezilla a relooké légèrement son interface depuis le moment où cet article a été rédigé mais les boutons et les fenêtres n’ont pas changé de place…
Vous pouvez donc lire Comment ça marche Filezilla ?. Pour les curieux ou ceux qui souhaitent se rafraîchir la mémoire sur un point ou deux, il y a des liens vers d’autres articles comme C’est quoi un serveur FTP ?. On est en plein dans le sujet !
La pratique
Concrètement, il va falloir transférer dans le dossier “www” situé sur le serveur d’alwaysdata le dossier complet de votre site personnalisé situé en attendant sur votre poste de travail. En utilisant Filezilla comme cela vous a été montré et expliqué plus haut, tout devrait marcher comme sur des roulettes !
Précautions à prendre
Avant de vous lancer, vous allez faire attention à quelques petites choses…
Le fichier index.html
Il est impératif, pour que votre site s’affiche dans la fenêtre du navigateur de vos futurs lecteurs en saisissant une simple URL, que le dossier de votre site contienne un fichier nommé “index.html”. C’est la page d’accueil… même si elle est la seule page du site. Si le fichier html que vous voulez montrer au reste du monde porte un autre nom, renommez-le “index.html” !
Si vous le nommez autrement, il sera nécessaire de saisir le nom du fichier à la fin de l’url d’accès au dossier du site.
Les images dans le dossier img
Inutile de transférer sur le serveur d’Alwaysdata des images de maquette qui n’ont pas été utilisé dans la page HTML. Veillez à ce que vos images soient correctement compressées. Vos images doivent être à la dimension maximale de leur utilisation dans le site (affiché sur grand écran)… pas plus ! Compressées au format jpeg (qualité élevée ou 60%), vos photos ne surchargeront pas votre espace d’hébergement.
Si vous chargez excessivement l’espace mis gratuitement à votre disposition (100 Mo maximum), vous ne pourrez pas héberger votre portfolio et le CMS avec lequel nous travaillerons au niveau 3 de la formation !
Le nom du dossier
L’url permettant d’accéder à votre compte est de la forme nomducompte.alwaysdata.net. Quand vous aurez transféré votre dossier de site, pour accéder au fichier “index.html” il faudra saisir une adresse sous la forme nomducompte.alwaysdata.net/nom-du-dossier.
L’adresse de votre site se termine par le nom que vous allez donner au dossier qui contient le fichier “index.html” et les dossiers dépendants (le dossier “css”, le dossier “img”, etc.).
Nommez votre dossier de site sans mettre de majuscule ou de chiffre au début du nom, sans lettres accentuées ni espaces. Utilisez de préférence les tirets hauts (tirets du 6) pour séparer les mots. Soyez concis et explicites !
➜ Une fois ces précautions prises, vous pouvez transférer le dossier correctement nommé de votre poste de travail vers le dossier “www” (dans le dossier… pas à côté du dossier “www”).
Test de bon fonctionnement
Si tout s’est bien passé, vous devriez accéder à votre site en saisissant dans votre navigateur l’adresse nomducompte.alwaysdata.net/nom-du-dossier.
En transmettez-moi cette adresse, je pourrai voir votre site, comme tous ceux à qui vous communiquerez la même adresse !
➜ Transférez un autre dossier de page Web, nommé convenablement (avec son fichier “index.html” à l’intérieur)… Modifiez ensuite le nom du dossier à la fin de l’url précédente : vous devriez accéder à votre deuxième site Web !
Voilà qui vous ouvre de nouvelles perspectives pour l’avenir 😉
Gérer le consentement
Pour offrir les meilleures expériences, nous utilisons des technologies telles que les cookies pour stocker et/ou accéder aux informations des appareils. Le fait de consentir à ces technologies nous permettra de traiter des données telles que le comportement de navigation ou les ID uniques sur ce site. Le fait de ne pas consentir ou de retirer son consentement peut avoir un effet négatif sur certaines caractéristiques et fonctions.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
