Pourquoi commencer le développement web par HTML et CSS ?

Devenir développeur web, c’est savoir se poser les bonnes questions, et la première est : « par où débuter ? » Il y a tellement de langages de programmation et d’outils que l’on peut rapidement s’y perdre. Alors, on va te guider en te conseillant de découvrir les langages HTML et CSS pour commencer. Si tu te demandes pourquoi, dis-toi que c’est comme pour les bœufs . Et si là, c’est encore moins clair, il est temps de lire l’article, toutes les réponses sont dedans.

Déjà, HTML et CSS c’est quoi ?

HTML, ça veut dire : Hyper Text Markup Language ou langage de balise pour l’hypertexte. CSS, ça veut dire : Cascading Style Sheets ou feuilles de style en cascade.

Euh, O’clock, tu peux être un peu plus clair là ?

OK, soyons plus clairs : ces 2 langages constituent la base de ce que tu consultes dans ton navigateur.  Tu veux un exemple ? 

1. Oui : Tu peux aller 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 ne m’en demande pas trop : On a fait le travail pour toi, ça ressemble à ça.

   

3.  Non :  Tu peux aller directement au paragraphe suivant.

En gros, nos navigateurs sont des logiciels pour interpréter le HTML et en faire une visualisation plus agréable à consulter qu’un code source qui peut sembler nébuleux pour le commun des mortels. Avec HTML, on va pouvoir délimiter, ou baliser les éléments constituant notre page web. Ensuite, on pourra ajouter du CSS pour mettre en forme en définissant des styles. Qu’est-ce que ça veut dire ? Ça 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 le décorateur. 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 : la porte sera peinte en noir, les fenêtres rouges et le géranium mesurera 30cm. Maintenant que c’est plus clair, tu peux aisément transposer ça pour un projet web, tu remplaceras simplement la porte par un lien, la fenêtre par un titre et le géranium par une liste par exemple.

Comment te faire comprendre par un navigateur ?

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, exactement comme le langage que j’utilise actuellement pour te parler. Si je te dis “bonjour”, 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.

Pourquoi parle-t-on de navigateur ?

La page que tu consultes est un hypertexte. Super, mais c’est quoi ? Les hypertextes sont des documents 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 commun 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.

On peut même s’y perdre et ça, c’est beau ! Alexis

Mais, pourquoi c’est important de connaître HTML et CSS pour devenir développeur web ?

HTML et CSS sont les bases du développement web, les pages qu’on consulte sont toutes structurées en code html et mise en forme en style CSS, tous les sites internet que tu consultes sont écrits comme ça. Tu te verrais essayer d’écrire avant d’avoir appris l’alphabet toi ? « ajzdbadydhzdydbétd » ouais, ça ressemblerait à ce que ton chat produit quand il s’assied sur ton clavier. Apprendre HTML et CSS en premier, c’est apprendre à lire et à écrire avant de converser, c’est le début qui permet ensuite d’aller très loin et de créer plein de choses. Voilà pourquoi c’est 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, quelle est la différence entre un développeur web et un intégrateur web ?  On a un super article qui répond en long et en large à cette question, juste ici : découvrir l’article.  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 !

Les 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.

Mais si d’autres langages permettent d’aller plus loin ou de gagner du temps, pourquoi ne pas commencer directement par eux ?

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. Ce n’est pas pour rien que les cours de HTML et CSS sont les premiers donnés dans nos formations 

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 si 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.

Et les outils dans tout ça ?

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

Si j’ai bien un conseil à te donner, c’est de ne pas mettre la charrue avant les bœufs. Alexis

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.