HTML et CSS | On t’explique les bases du développement web !

HTML, c’est : Hyper Text Markup Language ou langage de balise pour l’hypertexte. 

CSS, c’est : Cascading Style Sheets ou feuilles de style en cascade.

Ok, cool le blabla mais c’est possible d’être un peu plus clair ? 

Soyons plus clairs : ces 2 langages sont la base de ce que tu consultes dans ton navigateur. 

Tu veux un exemple ? 

1. Oui ! Alors tu vas sur google, wikipedia, Youtube, … ce que tu veux. Tu fais clic droit, puis tu cliques sur “afficher le code source” et tu verras du HTML.
2. Oui, mais j’ai un peu la flemme : On a fait le travail pour toi, ça ressemble à ça (voir plus bas la petite image) 
3. Non : Tu peux aller directement au paragraphe suivant.

En bref, nos navigateurs sont des logiciels qui visent à interpréter le HTML et en faire une visualisation plus agréable à consulter qu’un code source qui peut sembler énigmatique. Grâce à HTML, on va pouvoir délimiter, ou baliser les éléments qui constituent notre page web. Ensuite, on pourra ajouter du CSS pour mettre en forme en définissant des styles. Ce qui veut dire qu’on pourra passer en rouge, en gras ou en ce qu’on veut l’élément qui aura été identifié.

Pour faire encore plus simple, on va te l’expliquer avec une métaphore : on va créer un site internet comme on créerait une maison. HTML aura le rôle de l’architecture et CSS sera en charge de la déco.

HTML va dire : là-bas, on va mettre une porte, ici une fenêtre “et juste là, un petit géranium ! Ouais, ça va être bien.” CSS va dire : les murs seront peints en vert, les fenêtres jaunes et le géranium mesurera 20cm.

Maintenant que c’est plus clair, tu peux aisément transposer ça pour un projet web. 

HTML et CSS sont des langages web, ils ont chacun leurs règles de syntaxes et leurs vocabulaires. Le langage web va permettre au navigateur de comprendre ce que tu lui demandes, un peu comme le langage que j’utilise pour te parler. Si je te dis “Salut”, tu comprends que je te souhaite une bonne journée, parce que je te parle en français. Si j’écris : “<h1>”, le navigateur comprend que je souhaite commencer un titre, et il le fera jusqu’à ce que je lui demande d’arrêter en écrivant : “</h1>”, parce que je lui parle en HTML. Il en va de même pour CSS et tous les autres langages informatiques.

Les pages que tu consultes sont des hypertextes. Les hypertextes sont des docs reliés entre eux par des liens, reliés eux-mêmes à d’autres hypertextes par d’autres liens. Le moyen de naviguer d’un document à l’autre le plus traditionnel est de cliquer sur un lien. C’est pour cela qu’on appelle ce logiciel : un navigateur. Tous ces documents liés entre eux par des liens forment une toile. C’est pour cela qu’on parle de “web” ou de “net”, parce qu’on navigue sur une toile à la pêche aux informations.

HTML et CSS sont les bases du développement web, les pages qu’on consulte sont toutes structurées sous forme de code html et mise en forme en style CSS, tous les sites internet que tu consultes sont écrits de cette façon. C’est un peu comme apprendre à écrire avant d’avoir appris l’alphabet. Apprendre HTML et CSS en premier, c’est apprendre à lire et à écrire avant de discuter, c’est le commencement qui permet ensuite d’aller très loin et de créer plein de choses. C’est donc très très important. 

Quand tu veux créer une page, il faut forcément passer par là et c’est même tout un métier : celui d’intégrateur web. Mais revenons-en au développeur web, c’est quand même sur lui que porte cet article. On vient de dire que HTML et CSS étaient la base pour créer des pages. S’occuper du codage de quelques pages en HTML et CSS, ça va, c’est jouable, mais quand on s’occupe de la création d’un site à 1000 pages, avec pleins d’articles par exemple, il y a 1000 fichiers HTML derrière ça ? Si oui, comment gérer toutes les répétitions et interactions ?

La réponse est : non, et encore heureux. C’est là que le développeur web entre en jeu avec ses deux casquettes !

Pour préparer, assembler et dynamiser les pages HTML, le dev web va mettre sa casquette de développeur back-end et s’occupera de toute la partie cachée du site. Il pourra définir un seul et même gabarit de page dynamique avec différents jeux de données pour les 1000 pages d’articles, ce qui évite pas mal de répétitions, permet de rendre les projets évolutifs et maintenables. 

Pour gérer les interactions au sein de la page et décrire les évolutions de l’interface, il va mettre sa casquette de développeur front-end et s’occupera de la partie visible du site, celle qui sera consultée par l’utilisateur dans son navigateur. Par exemple, il pourra définir l’action qui sera effectuée lors d’un clic ou encore faire apparaître une nouvelle zone de contenu lors du passage de la souris au-dessus d’une partie de la page. 

Dans les deux cas, le développeur devra découvrir tout un tas de concepts, que ce soit : les variables, les types, la programmation orientée objet appelée “POO”, l’algorithmique, les fonctions … Ainsi que de nouveaux langages, comme : JavaScript ou encore PHP. Car chaque langage de programmation a sa spécificité et les rôles du HTML et du CSS s’arrêtent à un moment pour laisser place à d’autres langages.

Tout simplement parce que si l’on ne sait pas gérer correctement une structure HTML ou une feuille de style CSS, on aura beau vouloir apprendre à développer avec n’importe quels autres langages, les problèmes que tu aurais rencontrés en commençant calmement avec HTML et CSS reviendront ailleurs et de plus belle. Tu pourrais être bloqué à cause d’une simple balise HTML mal placée et ne pas t’en rendre compte, par exemple.

Il y a énormément de capacités attendues chez un développeur web que tu pourras déjà commencer à aiguiser dès ton apprentissage du HTML et du CSS, comme : te documenter correctement, atteindre tes objectifs, analyser un problème, t’approprier ton éditeur et ton environnement de travail.

Mais pourquoi c’est important ?

Pour toutes les raisons qu’on vient d’énoncer plus haut et surtout pour que tu ne perdes pas de temps et que tu ne sois pas perdu quand tu passeras à la suite. Commencer par les langages HTML et CSS te permettra d’avoir les bons réflexes et les bonnes réflexions, en gros, tu seras dans les meilleures conditions pour appréhender les problématiques de la programmation.

Tu as certainement entendu parler des technos comme : Symfony, React ou encore WordPress. Dans tous les cas, il s’agit de technologies reposant sur des langages cités précédemment.

Un outil doit venir comme une solution à un problème et on doit pouvoir en garder le contrôle. Une fois qu’on a compris une problématique et les solutions à y apporter, on peut commencer à regarder du côté des outils qui facilitent la mise en place des solutions. Il faut savoir prendre du recul et s’en défaire si nécessaire. Voilà, c’était notre dernier conseil avant de clôturer cet article.