C’est quoi le HTML5 & le CSS3 ?

Non classé, Web Development2 Comments

You Are Here:, Web DevelopmentC’est quoi le HTML5 & le CSS3 ?

Le HTML5 est un langage de programmation incontournable lorsque l’on est programmeur et le CSS3 aussi, et si tu compte un jour crée ton propre site internet (en e-commerce, blog, etc…) il te faudra impérativement faire du HTML et du CSS étant donné que ce sont tout deux des standards. Surtout que toutes les pages du World Wide Web (www) sont écrites en HTML & CSS. Mais je sais que certaine personne qui veulent utiliser des frameworks (WordPress, PrestaShop, etc…) vont me dire qu’il n’est pas nécessaire de savoir coder dans ces langages. Cependant si tu as envie de rajouter un mode de payement (sans plug-in) ou de changer le design, comment vas-tu faire ? Tu vas tout simplement être coincé, c’est pourquoi j’ai décidé de faire cet article pour présenter le HMLT5 ainsi qu’un petit peu le CSS3 ! Je tiens tout de même à préciser que cet article n’a pas pour bute de t’apprendre comment programmer en HTML & CSS par conséquent, je n’explique pas de façon précise les images que j’ai pus mettre en exemple dans la parti A quoi sa ressemble ? Ne crois surtout pas que je n’ai jamais fait de HTML, de toute façon je t’explique mon histoire un peu plus tard.

 

Mais avant, il y a certaine chose que tu doit savoir. Tout d’abord HTML est l’abréviation de HyperTextMarkup Language  qui signifie en français Langage de Balisage Hypertexte  (oui avec le html on va faire des hypertexte d’où son nom) et à été crée en 1991. Le CSS quand à lui, est le diminutif de Cascading StyleSheets qui signifie en français Feuilles de Styles en Cascade (en effet on va crée des page de style) et à été crée en 1996. Mais il y a une chose importante à souligner, c’est qu’il est possible (d’ailleurs c’est déjà arrivé) que certaine balise du HTML disparaisse ou sois obsolète. On peut comparer le HTML à des Lego, étant donné que ce sont des blocs que l’on imbriquent les un aux autres (d’où l’image principale de l’article).

 

Maintenant que tu sais tout ceci je vais te parler un peu de moi (tu peux passer cette partie si tu veux car elle est facultative). En réalité je n’ai pratiquement rien à dire, étant donné que je n’utilise le HTML & CSS que depuis quelques mois. Sachant que j’ai suivi une formation (gratuite) de Pierre Giraud sur ces langages. Elle était très complète et parfaite ( de la pratique, théorie, conseil, tout ce qu’il faut pour qu’une formation sois bonne). Je n’ai donc rencontré aucun problème sauf après avoir atteint un niveau suffisamment haut pour que je ne trouve plus grand chose à faire. Attention je ne dit surtout pas que je suis un pro, je dit juste que j’étais suffisamment performant en HTML5 & CSS3 pour connaître tous leurs aspects (même les animations). Et si tu arrive un jour au même point que moi, je t’invite à chercher des langages complémentaires au HTML & CSS. C’est ce que j’ai fait et je suis encore actuellement en train d’en apprendre grâce à Pierre Giraud !

S’il y a bien quelque chose qui énerve tous les codeurs et qu’il faut absolument respecter, c’est de ne pas utiliser le HTML pour remplir le rôle du CSS. Et pour que tu ne fasse jamais cette erreur je vais te dire à quoi servent chacun de ces langages.

Le HTML a pour fonction de structurer et de donner du sens à du contenu. En effet, on ne va donc utiliser le HTML uniquement pour ajouter des médias (images, vidéo, live etc…), faire des paragraphes, titres etc…

Le CSS a pour fonction de mettre en forme du contenu en lui appliquant ce qu’on appelle des styles. Nous allons donc utiliser le CSS sur notre code HTML, afin d’enjoliver le résultat visuel final. On va pouvoir mettre de la couleur à nos titres,faire des animations, changer la taille des média utilisés etc…

Si tu à bien tout compris, on va à l’aide du HTML & CSS crée des sites web plutôt facilement, étant donné que leurs apprentissage est assez simple et rapide. Certaine personne les considères même comme les langages les plus simples à apprendre. Personnellement je ne préfère pas redonner mon avis la dessus, puisque je l’ai déjà fait sur cet article : Comment débuter en programmation ?

HTML :

Il y a une chose très important à respecter, ce sont les normes du HTML (comme le Doctype par exemple) car sinon sa ne va pas fonctionner, ou alors sa marchera mais sa sera tellement mal fait que le navigateur va avoir du mal à lire le code et ainsi baisser le référencement naturelle (SEO) ! Ces normes tu les découvrira tout au long de ton apprentissage. Bref pour commencer une page HTML, il faut réaliser sa structure minimal. Voici à quoi elle ressemble :

 

 

Un peu plus haut je t’ai dit qu’avec le HTML on peut faire des paragraphes, titres etc… Mais je ne t’ai pas montrer concrètement à quoi sa pourrais ressembler. Mais pour que tu comprennes bien tout je t’invite à réaliser le code ci-dessous sur un bloc note (ou autre, IDE par exemple) que tu va ensuite enregistrer en .html puis l’ouvrir sur ton navigateur. Si je t’en demande trop tu peux juste te contenter de regarder les images ci-dessous :

 

Il existe deux type de balise, celle dite orpheline qui n’est composée que d’une seule balise et qui sont rare, en voici un exemple :

L’autre est appelé paire de balise ou balise double et est composée de deux balises, une balise ouvrante et une balise fermante, avec le contenu à l’intérieur, en voici un exemple :

Beaucoup de balise existe pour toute sorte de chose faire un pied de page, barre de navigation, tableau, paragraphe, etc…

CSS :

Contrairement au HTML, il ne faut pas respecter beaucoup de normes, mais juste un façon d’écrire (assez simple). Beaucoup de propriété CSS sont disponible, mais il n’est pas indispensable de toutes les connaître, cependant il est bien de savoir qu’ils existent ! Mais plus haut je t’ai aussi dit que le CSS permettez d’enjoliver nos pages web. Je vais donc te montrer ce que sa peut donner, cependant cet fois ci je ne vais pas te demander de reproduire ce code (sauf si tu t’en sens capable) car est possible que sa sois compliqué lorsque l’on débute même si c’est comme même très simple. Par conséquent, voici un exemple de code CSS, avec une image sans CSS (avec juste le HTML) et une image en rajoutant le CSS :

 

Je vais très rapidement te montrer les avantages et inconvénients du HTML uniquement, pas du CSS :

Avantages :

  • Sa compatibilité avec les différent navigateur, en effet il affichera la même page quelle que sois le navigateur (sauf pour les versions obsolète des navigateurs).
  • Sa facilité d’apprentissage, étant donné qu’il s’apprend plutôt rapidement même s’il demande un peu plus de temps pour apprendre à bien le maîtriser.

Inconvénients :

  • Il ne se suffit pas à lui même, il faut utiliser d’autre langage pour faire de beau et bon site web.
  • Les nombreuses normes à respecter, dans le cas contraire cela influe sur le SEO (référencement naturel du site).

Il en existe bien d’autre, mais je n’ai mis que ceux qui me sont passé par la tête, et puis de toute façon c’est à toi de te forger ton propre avis !

 

Je viens tout juste de te parler des inconvénients du HTML, mais je ne t’ai pas parlé précisément de ses limites. Malgré la facilité d’apprentissage de ce langage, il est plutôt limité. En effet, si tu à l’envie de crée un formulaire ce qui est possible en HTML, en revanche il est impossible de le traiter tu as envie de mettre des script en faisant des pages dynamique, si tu veux mettre de la couleur etc… il faudra impérativement recourir à un autre langage que le HTML. Il permet uniquement de structurer et de donner du sens à du contenu rien de plus. Il est impossible de crée des balises, tu n’as que celle de base. je pense que maintenant que tu as compris à quel point le HTML est bien mais très limité, heureusement qu’il existe des langages complémentaire pour remédier à ce problème !

 

Comme je viens de te le dire, le HTML est assez limité comme langage de programmation (même si ce n’en est pas un à proprement parlé) c’est pourquoi je vais te donner les 3 langages les plus utilisés et complémentaire avec du HTML & CSS.

Javascript : Le Javascript sert principalement à agir sur le comportement du navigateur. Avec ce langage, vous pourrez par exemple afficher une fenêtre d’alerte lorsqu’on clique sur un lien, mettre le site web dans les favoris, imprimer la page …

PHP : Le PHP est un langage très complet avec de nombreuse fonctions. Il permet de faire le lien entre votre site et une base de données, d’afficher son contenue de façon dynamique, de gérer des variables, de traiter des formulaires …

SQL : SQL est le langage pour agir sur vos base de données. Si le PHP fais le lien entre elles et votre site web, il vous faudra coder en SQL pour effectué des actions (ajouter, supprimer, modifier, trier, rechercher …)  sur celles-ci.

Je suis bien conscient qu’il doit en exister bien d’autre, mais personnellement je n’ai utilisé que ces trois la et la plupart des personnes aussi. Même q’il est vrai que j’ai utilisé Redact, mais ce n’est pas du tout un langages de programmation !

 

Ceci est un court historique pour les curieux, cependant je t’invites à te rendre sur Wikipédia si tu veux tout bien détaillé. En effet, je ne fait que résumé ce qu’il y a écrit sur Wikipédia et je l’assume !

1989-1992 : A la base le HTML a été inventé pour permettre d’écrire des documents hypertextuels liant les différentes ressources d’Internet avec des hyperliens. Aujourd’hui, ces documents sont appelés des pages web. Et c’est en 1991 que Time Berners Lee pendant son annonce du web sur Usenet, qu’il parle certes que du SGML mais on peut remarquer que l’url comportait un .html !

1993 : A cet époque on pourrais considérer le HTML comme HTML 1.0, cependant personne ne l’appelait comme ceci étant donné qu’il était en constante évolution. Et c’est d’ailleurs durant la fin de cet année que le terme HTML+ est utilisé pour désigner la version future du HTML.

1994 : C’est durant cet année que le HTML eu le plus d’ajout visuel (que sa sois au niveau de l’interface ou des balises). Ce qui à eu pour conséquence de diviser le développement du HTML en deux voix. D’un côté les développeurs qui voulaient maximiser l’impact visuel des pages web et de l’autre côté ceux qui veulent d’étendre les capacités de description sémantique

1995-1996 : Pendant qu’il préparait le HTML 3.0, le HTML 2.0 fut finalisé durant cette année.

1997 : Le 14 janvier, le W3C publie la spécification html 3.2. Le 18 décembre, le W3C publie la spécification html 4.0

1998-1999 : La dernière spécification de html est la 4.01 date du 24 décembre 1999. Elle n’apporte que des corrections mineures à la version 4.0.

2000 : A ce moment la, le HTML fut totalement abandonné pour le XHTML. Mais pas pour très longtemps, en effet pendant que le XHTML 2.0 était en train de se développer, beaucoup de personnes veulent revoir le développement du HTML en 2004.

2007 à nos jours : Le XHTML à finalement été abandonné et oubliée, le CSS parut,  jusqu’à sa version 3.0 (celle actuel) ainsi que son acolyte le HTML5 et de nombreuses choses ont été ajouté et simplifié en HTML.

 

Il y a 3 erreurs que tu ne devra pas commettre. La première est d’utiliser le HTML pour remplir le rôle du CSS, mais je pense que tu la déjà compris ! Ensuite, il  ne faut pas lire des articles sur le HTML ou le CSS  qui date de trop longtemps. En effet, durant ton apprentissage il t’arrivera peut-être de chercher des choses sur le sujet, mais le HTML et le CSS sont en constante évolution alors beaucoup de choses peuvent être obsolète désormais (même cet article) ! Et enfin, comme j’ai pus te le dire à un moment mon niveau stagnais car je ne savais plus quoi faire avec ces langages et je n’avais plus rien à apprendre sur eux. Si tu arrive au même point que moi je t’invite à apprendre d’autres langages de programmation complémentaire au HTML5 & CSS3. Je t’en ai cité pas mal un peu plus haut.

 

Maintenant, je pense que tu à compris beaucoup de choses fondamentale sur le HTML5 & le CSS3. Ses choses sont très importante à comprendre, car sa peut te faciliter l’apprentissage de ces langages. Mais je compte avoir fait un livre numérique, une version audio et une formation (tous sur le HTML & CSS) avant la fin d’année 2018 ! Dans tout les cas j’arrête cet article ici ! Mais je voudrais savoir si cet article ta été utile ou du moins ta plus, n’hésite pas à me donner ton avis en commentaire ou sur mes réseaux sociaux ! Aller bonne apprentissage jeune outsider !

2 thoughts to “C’est quoi le HTML5 & le CSS3 ?”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top