Chap1 : Introduction au cours HTML et CSS

I- 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 » !

I-Définitions et usages du HTML et du CSS

Nous allons dans cette leçon poser une première définition du HTML et du CSS et comprendre plus
précisément quel va être leur rôle dans la création d’un site Internet.

On va ainsi expliquer ce qu’on peut faire et ce qu’on ne peut pas faire avec chacun de ces
deux langages.s

Le HTML : langage de balisage

Le HTML est un langage qui a été créé en 1991. Les sigles « HTML » sont l’abréviation de «
HyperText Markup Language » ou « langage de balisage hypertexte » en français.

Le HTML est donc un langage de balisage, c’est-à-dire un langage qui va nous permettre de
définir les différents contenus d’une page.

Pourquoi est-il si important de définir les différents contenus d’une page ? Pour répondre à
cette question, il va avant tout falloir que vous compreniez ce qu’est un site internet et ce qu’il
se passe lorsque vous essayez d’accéder à un site internet.

Ici, je vais essayer de rester le plus simple possible. Tout d’abord, qu’est-ce qu’un site internet
? Un site internet est un ensemble de fichiers de code et de medias (images, videos, etc.) liés
entre eux et disponibles à tout moment via le web.

Pour que les différentes ressources constituant un site internet soient toujours accessibles, on
les héberge généralement sur un serveur d’un hébergeur professionnel comme OVH par
exemple.

Un serveur est un ordinateur plus ou moins comme les nôtres et qui stocke les différentes
ressources d’un ou de plusieurs site internet. Les seules différences entre un serveur et nos
ordinateurs est qu’un serveur est généralement beaucoup plus puissant que nos ordinateurs,
qu’il est (normalement) toujours connecté à Internet et qu’il va posséder quelques logiciels
supplémentaires lui permettant d’exécuter certains codes.

Notez ici qu’on appelle ces ordinateurs des « serveurs » car leur seul et unique rôle va être de
« servir » (au sens de « fournir ») des pages dès que quelqu’un va le leur demander.

Comment accède-t-on à une page d’un site internet ? Pour répondre à cette deuxième
question, je vais m’aider d’un exemple. Imaginons que l’on souhaite accéder à la page
d’accueil de mon site. Pour cela, on va taper www.pierre-giraud.com dans la barre de notre
navigateur.

Lorsqu’on demande à accéder à une page d’un site internet, nous sommes ce qu’on appelle
des « clients ».

Notre navigateur va contacter le serveur sur lequel est hébergée la page à laquelle on souhaite
accéder et lui demander de renvoyer les différents éléments de la page : la page sous forme de
code HTML et potentiellement les différents médias intégrés dans la page (ce qu’il se passe
est en pratique bien évidemment plus complexe mais encore une fois je simplifie
volontairement ici).

Le navigateur va donc recevoir ces différents éléments et les afficher. Cependant, comment
fait-il pour savoir ce qu’il doit afficher ? Il va bien évidemment utiliser le code HTML. En
effet, le navigateur comprend bien les différentes balises HTML (le HTML utilise ce qu’on
appelle des « balises » pour définir les contenus) et va donc « comprendre » de quoi est
constituée notre page et ce qu’il doit afficher.

Le rôle du HTML est donc crucial puisqu’il va être notre langage privilégié pour indiquer aux
navigateurs ce quoi est constituée chaque page et ce qu’ils doivent afficher. Grâce au HTML,
on va par exemple pourvoir indiquer que tel contenu est un texte qui n’est qu’un paragraphe,
que tel autre contenu est un texte qui est un titre de niveau 1 dans notre page, que tel autre
contenu est une liste, un lien, etc.

En plus de cela, le HTML va également nous permettre d’insérer différents médias (images,
vidéos, etc.) dans nos pages web en indiquant au navigateur » à cette place-là dans ma page,
je veux que s’affiche cette image «. Notez que dans ce cas précis, pour que le navigateur
affiche la bonne image, on va lui fournir l’adresse de l’image dans le code HTML.
Le CSS : langage de styles

Le CSS a été créé en 1996, soit 5 ans après le HTML. Les sigles « CSS » sont l’abréviation de
« Cascading StyleSheets » ou « feuilles de styles en cascade » en français.

Le CSS vient résoudre un problème bien différent du HTML : en effet, le HTML sert à définir
les différents éléments d’une page, à leur donner du sens. Le CSS, lui, va servir à mettre en
forme les différents contenus définis par le HTML en leur appliquant des styles.

Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de
modifier l’apparence des contenus de la page. On va ainsi par exemple pouvoir définir la
taille, la couleur ou l’alignement de certains contenus HTML et notamment en l’occurrence
de certains textes dans notre page.

Pour styliser le contenu lié à un élément HTML en CSS, nous allons pouvoir le cibler en nous
basant sur l’élément HTML en question ou en utilisant d’autres procédés que nous verrons
plus tard dans ce cours.
A retenir : n’utilisez pas le HTML pour mettre en forme vos contenus !

Voilà une chose que je vais vous répéter encore et encore au fil de ces premiers chapitres :
vous ne devez jamais utiliser le HTML pour faire le travail du CSS.

En effet, si vous affichez la page en HTML créée ci-dessus dans votre navigateur sans y
ajouter de CSS, vous pouvez remarquer que le contenu qui a été déclaré comme étant un titre
s’affiche en grand et en gras, tandis que la taille du texte de notre paragraphe est plus petite et
la police moins grasse.
Certains débutants en déduisent donc « pour mettre un texte en grand et en gras, il suffit
d’utiliser une balise représentant un titre en HTML ». Sortez-vous cela immédiatement de la
tête !

Le HTML est un langage qui a été créé pour structurer des pages et pour donner du sens au
contenu. Le principe même du HTML est d’indiquer aux navigateurs que tel contenu est un
texte qui doit être considéré comme un titre tandis que tel autre contenu est un texte qui doit
être considéré comme un simple paragraphe et etc.

Si votre navigateur affiche par défaut les contenus textuels que vous avez déclaré comme des
titres en HTML en grand et en gras et à l’inverse les paragraphes en plus petit c’est justement
parce que chaque navigateur possède sa propre feuille de styles (c’est-à-dire son propre code
CSS) qui sera utilisé si aucun code CSS n’a été précisé de notre côté.

Je répète ici car cela me semble très important : chaque navigateur a une feuille de style dans
laquelle sont définis des styles pour chaque contenu HTML qui seront appliqués par défaut si
aucun autre code CSS n’est fourni. Cela permet d’apporter une mise en forme minimale au
contenu dans les cas rares où les styles CSS ne seraient pas définis ou si notre code CSS ne
peut pas être chargé.

En fournissant nos styles CSS pour les différents contenus de notre page, nous allons donc
pouvoir définir l’apparence de ceux-ci puisque les styles que nous allons fournir vont être
considérés comme prioritaires par rapport à ceux du navigateur.
N’essayez pas forcément de comprendre comment fonctionne le code ci-dessus, ce n’est pas
le but ici. La seule chose que vous devez comprendre est qu’on applique ici des styles CSS à
notre premier contenu HTML placé entre les balises <h2> et </h2> (qui servent à définir un
titre de niveau 2) mais pas au deuxième.

Pour notre premier titre de niveau 2, on indique qu’on veut une taille de texte de 16px et une
couleur de texte orange et c’est donc ce que va afficher le navigateur. Comme on n’indique
aucun style pour le deuxième titre de niveau 2, le navigateur va charger ses styles par défaut.

Note : Chaque version de chaque navigateur possède sa propre feuille de style, et c’est la
raison pour laquelle une même page peut être rendue différemment d’un navigateur à un autre
ou même d’une version d’un navigateur à une autre version de ce même navigateur !
Cependant, aujourd’hui, un véritable effort d’harmonisation a été fait et la plupart des
navigateurs utilisent plus ou moins les mêmes styles par défaut.

En bref, retenez que vous ne devez jamais utiliser le HTML pour modifier l’apparence d’un
contenu car cela est le rôle du CSS. Si vous faussez le tout en déclarant par exemple des titres
qui n’en sont pas, vous pervertissez le rôle du HTML et cela va impacter fortement la qualité
de votre page web, sa validité et votre référencement global.