• Pourquoi apprendre les langages HTML et CSS

Si le monde de l’informatique vous plaît et que vous êtes tenté d’apprendre la programmation informatique, vous serez obligé de passer par l’apprentissage du HTML et du CSS et ceci pour deux raisons.
Tout d’abord, il faut savoir que le HTML et le CSS sont deux véritables standards et n’ont donc, à ce titre, pas de concurrent comme cela peut être le cas pour le langage PHP par exemple (concurrencé par Ruby, Python, Django, etc.).
Ensuite, les langages HTML et CSS sont véritablement le socle de tout projet de développement web. Que vous vouliez créer un site e-commerce, un blog, une application mobile ou quoique ce soit d’autre, vous serez obligé de passer par les langages HTML et CSS.
Pour certains qui ont déjà quelques connaissances dans le monde du web peuvent se dire qu’apprendre à coder en HTML et en CSS est inutile car ils utilisent des solutions toute prêtes comme les Framework (WordPress, PrestaShop, Bootstrap, etc.), ou encore il utilise des éditeurs WYSIWIG (What You See Is What You Get).
Jetons un coup d’œil sur les inconvénients de ces solutions.

• Utilisation des Framework : Un Framework est un outil qui décrit le squelette de l’application. Son utilisation est géniale. En effet, ce sont des centaines d’heures de travail économisées pour vous et également la garantie d’un travail bien fait à priori. Certes !

Toutefois, le jour où vous voulez intégrer quelque chose comme disons… un système de paiement, comment faites-vous ? Idem si vous voulez modifier un peu l’apparence graphique de votre site. Il faudra aller toucher un peu le code… Tout ça pour vous dire que s’il est vrai qu’installer un Framework peut être une bonne solution, ce n’est plus suffisant aujourd’hui sur le web.

• Les éditeurs WYSIWIG sont des éditeurs qui codent « à votre place ». En gros, vous choisissez d’insérer un paragraphe, une image, un carré, etc. et l’éditeur crée le code correspondant. Un exemple célèbre est Adobe Dreamweaver.

Si ces éditeurs sont de plus en plus puissants et de mieux en mieux fait, il n’empêche qu’ils font et continueront toujours à faire des erreurs. En effet, il n’est pas possible pour un programme de penser comme un humain et ainsi votre code ne sera jamais tout à fait
valide. De plus, certaines limitations demeurent.

Au vu de ces différentes problématiques, il en ressort qu’il est important pour tout développeur web d’apprendre le langage HTML et CSS avant de se lancer dans le monde du web.

• Définition et rôle du HTML et du CSS
• HTML signifie Hyper Text Markup Language, en français « Langage Hypertexte de Balisage ». il a fait son apparition dès 1991 lors du lancement du Web. Son rôle est de gérer
  et organiser le contenu. C'est donc en HTML que vous écrirez ce qui doit être affiché sur la page : du texte, des liens, des images… Vous direz par exemple : « Ceci est mon titre, ceci est mon menu, voici le texte principal de la page, voici une image à afficher, etc. ».
• CSS (Cascading Style Sheets, aussi appelées Feuilles de style) : le rôle du CSS est de gérer l'apparence de la page web (agencement, positionnement, décoration, couleurs, taille du texte…). Ce langage est venu compléter le HTML en 1996.

• Les différentes versions de HTML et CSS

Au fil du temps, les langages HTML et CSS ont beaucoup évolué. Dans la toute première version de HTML (HTML 1.0) il n'était même pas possible d'afficher des images !
Voici un très bref historique de ces langages pour votre culture générale.

• Les versions de HTML
• HTML1 : c'est la toute première version créée par Tim Berners-Lee en 1991.
• HTML2 : la deuxième version du HTML apparaît en 1994 et prend fin en 1996 avec l'apparition du HTML 3.0. C'est cette version qui posera en fait les bases des versions suivantes du HTML. Les règles et le fonctionnement de cette version sont donnés par le W3C (tandis que la première version a été créée par un seul homme).
• HTML3 : apparue en 1996, cette nouvelle version du HTML rajoute de nombreuses possibilités au langage comme les tableaux, les applets, les scripts, le positionnement du texte autour des images, etc.
• HTML4 : il s'agit de la version la plus répandue du HTML (plus précisément, il s'agit de HTML 4.01). Elle apparaît pour la première fois en 1998 et propose l'utilisation de frames (qui découpent une page web en plusieurs parties), des tableaux plus complexes, des améliorations sur les formulaires, etc. Mais surtout, cette version permet pour la première fois d'exploiter des feuilles de style, notre fameux CSS ! HTML5 : c'est LA dernière version. Elle fait beaucoup parler d'elle car elle apporte de nombreuses améliorations comme la possibilité d'inclure facilement des vidéos, un meilleur agencement du contenu, de nouvelles fonctionnalités pour les formulaires, etc. C'est cette version que nous allons découvrir ensemble.

• Les versions de CSS
• CSS 1 : dès 1996, on dispose de la première version du CSS. Elle pose les bases de ce langage qui permet de présenter sa page web, comme les couleurs, les marges, les polices de caractères, etc.
• CSS 2 : apparue en 1999 puis complétée par CSS 2.1, cette nouvelle version de CSS rajoute de nombreuses options. On peut désormais utiliser des techniques de positionnement très précises, qui nous permettent d'afficher des éléments où on le souhaite sur la page.
• CSS 3 : c'est la dernière version, qui app
• L’éditeur de texte

Coder en HTLM/CSS est simple car il ne demande peut de ressource. Un simple éditeur de texte comme le bloc note de Windows est peut faire l’affaire.

Logiciel bloc note de Windows
On peut tout à fait créer un site web uniquement avec Bloc-Notes, le logiciel d'édition de texte intégré par défaut à Windows.
Il y a cependant des logiciels plus puissants d’autre payant, et d’autre gratuit. Aujourd'hui, personne n'utilise vraiment Bloc-Notes. On peut classer ces logiciels de création de site web en deux catégories :

• Les WYSIWYG (What You See Is What You Get - Ce Que Vous Voyez Est Ce Que Vous Obtenez) : ce sont des programmes qui se veulent très faciles d'emploi, ils permettent de créer des sites web sans apprendre de langage particulier. Parmi les plus connus d'entre eux : Mozilla Composer, Microsoft Expression Web, Dreamweaver… et même Word ! Leur principal défaut est la qualité souvent assez mauvaise du code HTML et CSS qui est automatiquement généré par ces outils. Un bon créateur de site web doit tôt ou tard connaître HTML et CSS, c'est pourquoi je ne recommande pas l'usage de ces outils.
• Les éditeurs de texte : ce sont des programmes dédiés à l'écriture de code. On peut en général les utiliser pour de multiples langages, pas seulement HTML et CSS. Ils se révèlent être de puissants alliés pour les créateurs de sites web !

Dans ce cours, nous allons utiliser le logiciel Notepad++ qui est un logiciel gratuit et offre une interface assez sympa afin de faciliter le travail du développeur.

Il est téléchargeable via le lien :
https://notepad-plus-plus.org/assets/images/folder_download_4.png

figure :présentation de Notepade++

Avant toute manipulation, je vous conseille de faire les réglages suivants : allez dans
Langage > H > HTML. Cela permettra au logiciel de savoir que l'on va taper du HTML.
Lorsque vous utiliserez le logiciel, il colorera votre code (figure suivante), ce qui vous permettra de vous repérer plus facilement.

Figure : coloration sous Notepad++

• Le navigateur

Qui dit Web, dit navigateur ; il est impératif d’utiliser un navigateur enfin de tester votre code HTML et CSS. Le navigateur est le programme qui nous permet de voir les sites web. Comme je vous l'ai expliqué plus tôt, le travail du navigateur est de lire le code HTML et CSS pour afficher un résultat visuel à l'écran. Si votre code CSS dit « Les titres sont en rouge », alors le navigateur affichera les titres en rouge ou encore place cette photo à tel endroit et le navigateur exécute. Le rôle du navigateur est donc essentiel !
On ne dirait pas, mais un navigateur est un programme extrêmement complexe. En effet, comprendre le code HTML et CSS n'est pas une mince affaire. Le principal problème, vous vous en rendrez vite compte, c'est que les différents navigateurs n'affichent pas le même site exactement de la même façon ! Il faudra vous y faire et prendre l'habitude de vérifier régulièrement que votre site fonctionne correctement sur la plupart des navigateurs.
Comme navigateur, nous pouvons citer :

• Google chrome : https://www.google.com/intl/fr_ALL/chrome/
• Mozilla Firefox : https://www.mozilla.org/firefox/download/thanks/
• Internet exploreur

Opéra