Introduction au cours HTML et CSS

Le but de ce premier chapitre est de vous convaincre rapidement de l’importance et de la place particulière du HTML et du CSS parmi l’ensemble des langages informatiques.

Nous allons également nous intéresser à la question « pourquoi apprendre à coder » et passer en revue les alternatives existantes à l’apprentissage de la programmation en soulignant les points forts et faibles de chacune d’entre elles.

 

HTML et CSS : deux langages incontournables

Il existe aujourd’hui des dizaines et des dizaines de langages informatiques et de programmation différents : HTML, CSS, JavaScript, PHP, Python, Ruby on Rails, C, C#, C++, Java, etc. pour ne citer qu’eux.

Certains de ces langages ont des possibilités et des rôles similaires, ce qui signifie qu’ils vont être (dans une certaine mesure) interchangeables : on va pouvoir utiliser un langage ou l’autre pour effectuer une même opération selon notre sensibilité personnelle ou selon l’environnement dans lequel on se trouve.

D’autres langages, en revanche, vont être beaucoup plus exclusifs ou ne pas avoir de concurrent et on va donc obligatoirement devoir passer par eux pour effectuer certaines opérations. Cela va être le cas du HTML et du CSS.

En effet, le HTML et le CSS sont deux véritables standards en informatique qui n’ont à l’heure actuelle aucun concurrent comme cela va pouvoir être le cas pour le langage PHP par exemple (pour lequel il existe des alternatives comme Ruby on Rails ou Python entre autres).

De plus, les langages HTML et CSS vont se trouver à la base de tout projet web car ils ont un rôle qui les rend incontournables : les navigateurs (Google Chrome, Safari, etc.) sont des programmes qui ont été construits pour pouvoir lire du code HTML au départ et qui ne peuvent aujourd’hui lire que du code HTML, CSS et JavaScript et nous allons donc nous appuyer sur ces langages (et sur le HTML en particulier) pour pouvoir afficher nos pages.

En bref : quel que soit votre projet web (blog, site e-commerce, application mobile, etc.), vous devrez forcément utiliser du HTML et du CSS.

Pour être un peu plus précis et pour anticiper un peu sur la suite de ce cours, le HTML est un langage de structure : il permet d’indiquer au navigateur que tel contenu est un titre, que tel autre est un simple texte, que cet objet est une image, que celui-ci est une liste, etc. Le navigateur, qui « comprend » le HTML, va se baser sur ces indications pour afficher les contenus.

Voici un premier exemple de code HTML :

Je n’ai pas l’intention de vous expliquer précisément ce que représente chaque élément dans ce code pour le moment car ceci n’aurait aucun intérêt. Pas d’inquiétude, nous aurons le temps de voir tout cela par la suite.

L’idée ici est simplement de commencer à vous familiariser avec la syntaxe du HTML et de voir comment le navigateur va traiter ce code. On va ici se concentrer sur deux lignes : la ligne contenant l’élément HTML h1 qui représente un titre de niveau 1 et celle contenant l’élément p qui représente un paragraphe.

Observons comment le navigateur va traiter ces contenus en ouvrant notre fichier dans Google Chrome par exemple :

Comme vous pouvez le voir, seul le contenu textuel placé entre <h1> et </h1> et entre <p> et </p> est affiché à l’utilisateur. On voit bien que le navigateur comprend que ces deux contenus ne sont pas équivalents puisqu’il les traite de manière différente en les affichant différemment.

Ajoutons maintenant un peu de CSS à la page. Le CSS est un langage de styles : il permet de modifier l’apparence ou le rendu visuel de nos contenus HTML et donc de nos pages web.

Ce code CSS indique au navigateur que les titres de niveau 1 devront avoir une taille de 16px (pixels) et être de couleur orange. On indique également que nos paragraphes doivent avoir une taille de 16px et une couleur bleue. Voici le résultat :

Une nouvelle fois, n’essayez pas de comprendre ces codes immédiatement : nous allons le faire dans les prochains chapitres. Le but ici n’est que de vous montrer à quoi le « code » en général va pouvoir ressembler.

 

Quelles alternatives à l’apprentissage des langages informatiques ?

De nombreuses personnes veulent lancer leur site internet sans forcément apprendre à coder. Est-ce une bonne idée ? Quels sont les risques ? Quelles alternatives existent pour créer un site web sans avoir à le coder ? Quels sont leurs points forts et points faibles ?

Il existe selon moi trois alternatives à l’apprentissage de la programmation qu’on va pouvoir considérer lorsqu’on a un projet web mais qu’on ne veut pas forcément devenir développeur :

• Le recours à un développeur / une agence externe ;
• L’utilisation d’un CMS ;
• L’utilisation d’un éditeur WYSIWIG.

Je vais tenter d’expliquer les points forts et faibles de chacune de ces alternatives et vous montrer en quoi la connaissance ou à minima la compréhension du fonctionnement des langages informatiques reste quasi indispensable quelle que soit l’option choisie.

Solution n°1 : faire appel à un développeur externe

La première solution, qui est certainement la plus évidente pour créer un site internet lorsqu’on ne veut pas le coder soi-même, est de faire appel à un développeur externe ou même à une agence de développement.

Cette première alternative présente à la fois des avantages et des inconvénients. Tout d’abord, parlons du prix. Ici, il va être très variable selon le site que vous allez vouloir créer bien sûr mais également selon le prestataire choisi.

En effet, si vous faites appel à une agence, le coût sera très souvent beaucoup plus élevé que si vous faites appel à un freelance (d’autant plus si vous passez par une plateforme d’annonces où ils sont en concurrence).

Sans rentrer dans le débat sur la qualité, il me semble quand même honnête de dire qu’aujourd’hui une personne seule ne peut pas tout (bien) faire : design, intégration, etc.

En plus de cela, deux autres questions d’importance se posent lorsque vous faites appel à un prestataire externe. La première est : comment bien expliquer ce que vous voulez créer comme site si vous ne savez pas comment le code fonctionne ?

Un client qui n’a aucune notion technique ne va pas pouvoir définir clairement ce qu’il veut. En effet, comprenez bien que le développement est une langue différente tout comme peut l’être la mécanique. Lorsque vous n’exprimez pas précisément votre besoin avec ses spécificités techniques, vous laissez le soin au développeur de les imaginer, ce qui entraine souvent des incompréhensions entre le client et le prestataire développeur.

Imaginez que vous faisiez appel à des ouvriers pour construire une maison mais sans passer par un architecte : vous n’allez pas pouvoir décrire précisément ce que vous voulez. Vous allez décrire votre besoin avec vos mots comme par exemple : « je veux une terrasse, 4 chambres, une cheminée », etc.

De votre point de vue vous « avez tout dit ». Cependant, du point de vue des ouvriers, l’essentiel est manquant : quelles matières utiliser ? quel type d’évacuation des eaux installer ? où faire passer les câbles électriques ? quel type de toiture choisir ?

Cela va donc naturellement mener à un client mécontent et qui va demander des modifications. Souvent, il va demander ce qui lui semble être de « petites modifications » mais les modifications demandées ne vont pouvoir être effectuées qu’en changeant en profondeur le site.

Si vous passez par une grosse agence, il est ici possible qu’il y ait une personne dont le rôle est de transcrire vos besoins en termes techniques. Cependant, ce genre d’agences est bien souvent hors budget pour le commun des mortels.

Enfin, reste la question de la maintenabilité du site : une fois le site livré, comment le faire évoluer ? Comment faire si des bugs apparaissent avec le temps et l’évolution des langages informatiques ? Ici, ne comptez pas trop sur votre prestataire de base pour vous servir d’aide en continu (à moins que vous ne le payiez à nouveau à chaque fois !).

Attention : je n’essaie pas de vous convaincre de ne pas passer par une agence ici. Ce que je veux vous montrer est que passer par un prestataire ne dispense pas de connaitre certaines bases en informatique : si vous connaissez ces bases et si vous comprenez comment fonctionne un site web vous pourrez vous exprimer beaucoup plus clairement et exprimer votre besoin dans un langage qui sera compréhensible pas les développeurs. Vous aurez ainsi beaucoup plus de chances d’avoir un site conforme à vos attentes et vous économiserez sur la facture finale (car moins d’allers-retours et d’incertitude).

Solution n°2 : Utiliser un CMS

Un CMS (pour « Content Management System » ou « Système de Gestion de Contenu ») désigne un ensemble d’applications / de logiciels qui vont permettre de mettre en place et de gérer un site internet.

Un CMS permet donc de posséder un site internet sans se soucier de comment fonctionne le code. Vous pouvez ici imaginer les différentes commandes d’une voiture : lorsque vous achetez une voiture, vous n’avez pas besoin de savoir comment la voiture fonctionne en soi ou de qui se cache sous le capot ; vous n’avez qu’à utiliser les commandes à votre disposition : pédales, levier de vitesse, volant, etc.

Parmi les CMS les plus connus en France on peut notamment nommer WordPress qui permet aujourd’hui de créer plus ou moins n’importe quel type de site ou PrestaShop pour créer un site e-commerce.

Les CMS sont généralement conçus sur le même modèle d’architecture modulable : les utilisateurs vont installer le CMS de base et vont ensuite pouvoir ajouter différents modules ou plugins pour personnaliser leur site.

Utiliser un CMS semble donc parfait pour quelqu’un qui ne sait pas coder à priori. La réalité est toutefois différente. Ici, vous devez bien comprendre que les CMS sont souvent très complexes et que leurs plus grands avantages (la simplicité d’installation et la modularité) vont être également souvent leurs plus grandes faiblesses.

En effet, comme les CMS sont créés de façon à pouvoir être utilisés par tous, la plupart d’entre eux sont d’une complexité rare (du point de vue du code) et vont souvent posséder des tonnes de fonctionnalités qui ne vont pas vous être utiles afin de couvrir le plus de besoins possibles et ainsi satisfaire le plus d’utilisateurs.

De plus, une autre contrepartie de cette architecture commune et modulable est qu’il va être très compliqué d’effectuer des modifications sur la structure de votre site à posteriori sans tout casser à moins d’avoir de sérieuses connaissances techniques sur le CMS en question.

Enfin, il reste le problème de l’incompatibilité possible entre différents modules que vous pourriez installer après avoir créé votre site.

L’usage des CMS reste cependant un bon compromis pour une personne lançant un site sans prétention ou pour quelqu’un qui n’a pas un besoin très spécifique mais, pour maitriser complètement son CMS et pour faire évoluer son site en toute sérénité, il faut finalement être un excellent développeur et un utilisateur expérimenté du CMS en question.

Solution n°3 : la création avec un éditeur WYSIWIG

Les éditeurs WYSIWIG (« What You See Is What You Get » ou en français « Ce que vous voyez est ce que vous obtenez ») sont des éditeurs qui vont créer eux même le code à partir d’un modèle que vous allez créer.

Un éditeur WYSIWIG va se présenter de la façon suivante : une palette d’outils sur le côté et une page dans laquelle vous allez pouvoir utiliser ces outils. Vous allez ainsi par exemple pouvoir insérer un rectangle dans votre page puis placer du texte dedans puis changer la taille de ce texte et etc.

L’éditeur va ensuite se charger de transformer ce que vous avez créé (« ce que vous voyez ») en code.

Le gros souci avec ces éditeurs est qu’ils ne possèdent pas la même logique qu’un humain et qu’ils ne peuvent pas penser un projet ou une page dans sa globalité. Ainsi, le code créé va très souvent être de très mauvaise qualité et cela va impacter le référencement de votre site entre autres.

Je ne parlerai pas plus de ces éditeurs qui ne constituent pas une alternative valide à mes yeux par rapport aux autres solutions proposées.

 

En résumé : apprendre à coder, ce n’est pas que pour les développeurs !

Je pense vous avoir démontré l’intérêt de maitriser au moins les bases du développement dans la partie précédente si vous avez un projet lié au web : économie d’argent, plus d’efficacité, création d’un site conforme à vos attentes, etc.

En effet, apprendre à coder ou tout au moins connaitre les bases en développement c’est avant tout mettre un pied dans le monde des développeurs pour pouvoir les comprendre et pouvoir vous faire comprendre.

De plus, connaitre le rôle des différents langages et comprendre comment fonctionne votre site permet de pouvoir le gérer de manière beaucoup plus efficace. En effet, je suis et reste persuadé qu’on ne peut pas travailler sereinement lorsqu’on ne comprend pas son outil de travail ou la structure dans laquelle on travaille.

C’est évident et pourtant la plupart des gens essayent de se persuader et de persuader les autres du contraire. Pourquoi ? Car tout le monde utilise internet aujourd’hui et la majorité des gens ne veulent pas faire l’effort de comprendre comment tout cela fonctionne.

Ce n’est pas un problème lorsque vous êtes un simple utilisateur, mais ça le devient lorsque vous devez gérer un site internet ou même lorsque vous travaillez dans un domaine lié au digital.

Deviendriez-vous plombier sur un coup de tête ? Non, car vous n’y connaissez rien en plomberie. C’est exactement pareil sur le web.

L’immense majorité des échecs liés au web proviennent du fait que des personnes se lancent dans l’aventure sans la moindre connaissance de leur environnement.

N’oubliez pas qu’il est essentiel pour qu’un commerce fonctionne -et aujourd’hui plus que jamais- d’avoir une compréhension de son propre business, de son architecture et de son infrastructure.

Si vous faîtes l’effort d’acquérir ces connaissances, je vous garantis que vous avez d’ores-et-déjà battu 99% de vos concurrents.

Convaincu de l’utilité d’apprendre à coder ? Dans ce cas, passons à la suite ! Car je suis certain que vous êtes impatients de découvrir ce que signifient les initiales « HTML » et « CSS » !