Le HTML5 est le langage de base pour apprendre pour créer des sites internet. Il est simple et se maitrise assez vite. Découvrons pourquoi le HTML5 est incontournable, quels sont ses avantages et quels sont ses limites. Enfin, nous évoquerons les langages complémentaires au HTML5.
Ce premier chapitre s’adresse principalement au débutant souhaitant apprendre la création de site internet en HTML5. C’est le chapitre 01 du tutoriel complet : Apprendre le HTML5.
[cadreHTML5]
I. A quoi sert le HTML5 ?
Le HTML5 est le langage de base pour créer un site internet. Le HTML5 sert a structurer votre contenu. Même s’il est relativement simple, vous en aurez toujours besoin. Donc, que vous vous lanciez dans un petit site personnel ou dans un très gros projet (un peu risqué sans trop de connaissance …), vous devrez utilisez du HTML5.
Apprendre le HTML5 est une chose, bien le maîtriser en est une autre.
Le HTML5 est un langage inspiré du XML et qui repose sur le principe de balises imbriquées. En résumé, il sert à indiquer au navigateur (internet explorer, firefox, safari …) comment afficher la page web. Imaginez que vous vouliez créer un site avec une seule page ou il serait juste écrit : « Bonjour ». Vous allez devoir écrire des lignes de codes HTML5 pour indiquer au navigateur d’afficher votre texte.
Comme le HTML5 fonctionne sur le principe de balises imbriquées, nous allons encadré notre texte par deux balises : La première pour indiquer le début et la deuxième pour indiquer la fin. Pour afficher du texte en HTML5, bien souvent nous utilisons la balise servant à indiquer qu’il s’agit d’un paragraphe. Même pour n’écrire qu’une seule phrase, on utilise cette balise.
Ce qui nous donnera la ligne de code suivant :
1 | <p>bonjour</p> |
La ligne de code ci-dessus est très simple à comprendre. On ouvre une première balise <p> pour indiquer au navigateur qu’il doit afficher le texte qui suit puis on la referme cette balise en ajoutant le symbole / (slash). La balise <p> indique un paragraphe. P signifiant Paragraph en anglais. Tous le texte qui se trouve entre ces deux balises s’affichera à l’écran.
Le HTML5 sert principalement à afficher un contenue (texte, image, vidéo, animation …). Ce contenue est hiérarchisé par des balises. Par exemple pour un titre on utilise des balises relatives (<h1>,<h2>,<h3> …), idem pour le texte (<p>,<a> pour faire un lien ….), le multimédia (<img> pour les images …).
Chaque balise à une utilisation logique dans la structuration du document. Le choix des balises est primordiale et les moteurs de recherches s’en servent pour classer et positionner vos page web lors de requête. Il est donc très important d’apporter un soin particulier à leur choix. Par exemple, pour une citation, on n’utilise pas une balise <p> (paragraphe) mais une balise <blockquote> (citation). Si le rendu à l’affichage est le même, pour l’interprétation du navigateur mais surtout des moteurs de recherche ce n’est pas du tout pareil.
Pour faire simple, le HTML5 sert principalemenent à :
- Afficher un contenue (texte, image, …)
- Créer des liens hypertext et relier les pages entre elles
- Structuré un document (titre, paragraphe …)
- Indiquez au navigateur ce qu’il doit afficher
- Bien indexer votre page web dans les moteur de recherches (choix de balise, mot-clé …)
Bien que nous n’ayons pas abordé le sujet, il sert aussi à :
- Donner des informations au navigateur sur la gestion de la page (gestion du cache, rafraichissement …)
- Donner des informations au navigateur sur la page (titre, mot-clé, langue, pays, copyright …)
II. Les avantages du HTML5
Le principal avantage du HMLT5 est donc sa simplicité relative. Car s’il s’apprend très vite, bien le maîtriser demande un peu plus de temps. Il est parfait pour les débutant car très rapidement vous saurez créer des pages web avec du texte, des images, des vidéos …
Le HTML5 ne compte qu’une centaine de balises. Ce qui est peu, et rassurez-vous, vous n’aurez pas besoin de les connaitre toutes. Sachez simplement qu’elles existent.
Un autre avantage du HTML5 est sa compatibilité. Depuis que les différents éditeurs de navigateur (microsoft, mozilla …) se sont rapproché, la portabilité entre-eux est bien meilleur que pour les précédentes versions du HTML. Lorsque vous codez une page en HTML5, théoriquement, elle s’affichera de la même facon quelque soit le navigateur (firefox, opéra, internet explorer …), l’OS (windows, mac, linux …) et le support (pc, smartphone, tablette …).
Chapitre complémentaire : Rendre son site web HTML5 compatible avec tous les navigateurs
III. Les limites du HTML5
Si le principale avantage du HTML5 est sa simplicité, il est aussi relativement limité. Prenons différent cas de figure afin de mieux comprendre :
Imaginons que nous avons créer toute une page sur notre passion : les escargots. Dans cette page, nous avons mis un titre, plusieurs paragraphes, des liens et des images. Lorsque nous affichons cette page sur notre navigateurs, chaque élément apparait à la suite les uns des autres. Le HTML5 nous a permis de tous afficher mais il nous faudra un autre langage, en l’occurrence le CSS, pour la mise en page. Ainsi nous pourrons changer la police de caractères, la taille de la police, la couleur du texte, de l’arrière-plan …
Le design de notre page sur les escargots étants réalisés, nous voulant maintenant lui ajouter un formulaire de contact et lorsqu’un internaute le remplira, pour sa prochaine visite, notre page devra afficher : « bonjour + pseudo renseigné dans le formulaire. » Le HTML5 nous as permis de créer un formulaire mais il ne pourra pas le traiter (l’analyser et l’envoyer). Vous aurez besoin d’un autre langage pour faire ces opérations.
Idem pour le stockage et l’affichage de variable. Tous les internautes n’ayant pas le même pseudo, le HTML5 ne pourra pas gérer les variables. Pour afficher le pseudo d’un internaute il faut d’abord le stocker (fichier, base de données …) puis écrire une ligne de code dans un autre langage qui indiquera au navigateur qu’il doit afficher : « bonjour + une variable ». Cette variable correspond au pseudo stocké.
Le HTML5 affiche du contenue statique. Il vous faudra utilisé un autre langage pour du contenue dynamique (variable …). Par exemple si nous souhaitons ajouter une partie commentaire à notre page sur les escargot, le HTML5 ne pourra pas enregistrer le commentaire laissé. Il vous faudra donc utiliser un autre langage pour inter-agir avec une base de données.
IV. Les langages complémentaires au HTML5
D’autre langage, complémentaire au HTML5, vous seront nécessaire pour réaliser vos projets. Il pourront-être soit directement intégré dans la page soit écris sur une autre page et relié à la page codé en HTML5. Parmi ces principaux langages, ont retrouve :
CSS : Le CSS, ou Cascading Style Sheet, sert à la mise en page. On dissocie le contenue qui est codé en HTML5 et la design qui se fait en CSS. Il vou servira par exemple à indiquer la police de caractères, la couleur, l’arrière-plan …
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.
Passons maintenant au deuxième chapitre du Tutoriel complet pour apprendre le HTML5, et découvrons quels seront les outils et ressources dont vous aurez besoin pour développer vos futurs sites web en HTML5. Et première bonne nouvelle, vous ne serez pas obligé de débourser un seul centimes pour coder en HTML5 ou en CSS3.
Chapitre 02 : Les ressources et outils nécessaires pour développer en HTML5
