Apprendre le HTML5 – Tutoriel Complet

Tutoriel complet pour apprendre le HTML5 – Quelque soit votre niveau, ce cours est fait pour vous. Que vous débutiez dans la création de site internet ou que vous maitrisez déjà le xHTML et / ou le HTML 4.01, découvrez toute la puissance du HTML5.

Chaque chapitre est rédigé de façon concise et compréhensible par tous. Ils sont divisés en thèmes consultables indépendamment suivant votre niveau et vos connaissances. Chaque point détaillé est inclus dans un exemple concret et certains sont accompagné de démo consultable en ligne.

L’ensemble du cours – en constante évolution -  est accessibles à tous quelque soit votre niveau

A quoi sert le HTML5 ? Que peut-on faire avec ? Quels sont ses limites ?

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

Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3

Ceci est le deuxième chapitre du Tutoriel complet pour apprendre le HTML5. Découvrons quels sont 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.

Pour commencer à écrire vos premières lignes de codes HTML5, vous n’aurez besoin que de deux choses : Un éditeur de texte et un navigateur. Le premier servira à écrire votre code, un simple bloc-note peut suffire mais nous verrons d’autres alternatives un peu plus loin dans ce chapitre. Quand au(x) navigateurs(s) il servira à afficher le résultat de votre travail.

[cadreHTML5]

Du simple éditeur de texte au gestionnaire de projet

Si un simple bloc-note peut suffire pour coder en HTML5 ou CSS3, d’autres alternatives existent et apportent bien souvent un meilleur confort. En ce qui me concerne, j’ai toujours utilisé Notepad++ sous windows et Kod sous mac OSx.

Certain logiciel gratuit sont bien plus pratique, par exemple, il vous propose d’enregistrer votre document sous de nombreuses extension (html, css, php, javascript …). Mais, le gros point fort se situe dans la coloration syntaxique. Ainsi, vous gagnerez en lisibilité. Les balises HTML5 seront coloré d’une couleur unique afin de mieux les repérer, idem pour votre texte …

Notepad++ : un éditeur de code GRATUIT à coloration syntaxique pour windows

Si votre machine tourne sous windows, vous pourrez utiliser le célèbre notepad++. Il est très pratique est très populaire ce qui vous permettra de trouver sur Google de nombreux tutoriel sur son utilisation. Vous pourrez également trouver des extension suivant l’utilisation que vous souhaitez en faire.

La meilleur alternative GRATUITE à NotePad++ sous Mac OSx avec l’application TextWrangler

TextWrangler est un puissant éditeur de texte destiné principalement pour le développement et la programmation avec coloration syntaxique. TextWrangler  est sans équivoque le meilleur éditeur de texte libre et gratuit pour Mac OS X et la meilleur alternative à NotePad++ pour ceux  qui viennent de windows. Voici donc la tant attendue  sortie de TextWrangler 4.0.

Télécharger TextWrangler depuis iTunes.

Kod.app : un éditeur de code GRATUIT à coloration syntaxique sous mac OSx

Je préfère être franc, si vous avez l’habitude d’utiliser Notepad++, vous serez décu de Kod. Mais c’est un des rares éditeurs de code à coloration syntaxique GRATUIT qui existe pour Mac OSx. Vous pourrez trouvez mieux, mais il faudra payer. Cependant, il ne sera largement suffisant pour l’instant.

Des gestionnaires de projet professionnel : Dreamveawer, coda …

Même si à votre stade cela vous serais inutile, sachez qu’il existe d’autre type de logiciel pour coder ses pages web. Par exemple, sous Max OSx vous pouvez utilisez Coda. C’est un formidable éditeur de code à coloration syntaxique. Comptez malgré tout investir environ 79 Euros.

Le sous titre de Coda est « One Window Web Development » et résume très bien ce qu’est le logiciel : l’intégration en une interface cohérente d’un éditeur de texte, d’un outil de création de feuilles de style CSS, d’un client FTP et d’un navigateur. Bref, une solution alternative à Dreamweaver (sans édition WYSIWYG) en plus léger et plus simple à prendre en main.

Dreamweaver est néanmoins incontournable dès que l’on parle de création de sites web. Ce logiciel a réussi à se forger une réputation crédible loin de l’image un peu péjorative de « Word pour pages HTML » et devenir une vraie solution d’édition et de développement. De nouvelles fonctionnalités font leur apparition comme le mode Affichage en Direct qui permet de visualiser sans ouvrir un navigateur externe, l’aperçu de la page en cours d’édition et même de geler le code Javascript pour le modifier en quelques clics.

C’est un excellent éditeur de sites web, en mode WYSIWYG comme en mode code source. Son prix, assez élevé, se justifie par sa puissance. Compté environ 450 Euros quand même !

Le navigateur : Afficher le résultat

Tester la compatibilité en installant plusieurs navigateurs sur votre machine

Si un seul navigateur suffit pour afficher le résultat de votre code HTML5 et/ou CSS3, il vous en faudra plusieurs sous la main pour tester la compatibilité de votre site web. Parmi les plus connus, on retrouve les navigateurs suivants :

• Internet Explorer
• Firefox
• Chrome
• Safari
• Opéra

Les autres navigateurs représentant une quantité négligeable de votre trafic ont été volontairement oublié. Malgré toutes ses précautions, il reste un problème : la version du navigateur. Prenons par exemple deux utilisateurs d’internet explorer. Si ils n’ont pas la même version, l’affichage peut être différent entre les deux.

Etant donné qu’il est quasi impossible, et très embêtant, de posséder chaque version de chacun des principaux navigateurs, vous comprenez déjà que la compatibilité sera un problème récurrent dans la création de vos futurs sites web.

Les solutions de test en ligne

Différents services en ligne gratuit vous permettent de tester l’affichage de votre site web sur plusieurs versions des principaux navigateurs. Super pratique !

Par exemple, vous pouvez utiliser BrowserShots. Son utilisation est très simple. Commencez par entrez l’url – l’adresse – de votre site web puis cochez ou décochez les versions des différents navigateurs dont vous souhaitez un aperçu.

Votre site web devra donc être en ligne, c’est à dire être héberger sur un serveur avec un nom de domaine. Jusqu’à présent nous avons vu comment développer un site ou des lignes de code que nous avons sauvegarder sur notre ordinateur et afficher dans notre navigateur. On appelle cette méthode : Developpement en Local.

Pour tester notre site avec BrowserShots, il devra donc être en ligne et non en local.

Attention : BrowserShots va prendre des photos de votre site tel qu’il sera affiché dans le navigateur sélectionné suivant sa version. Plus vous sélectionnez de navigateurs, plus le temps d’attente sera long.

Les plug in ou extension des navigateurs

Des plugins ou extension existent pour les différents navigateurs. Certaines sont très pratique pour les créateurs de site web et représentent une solution GRATUITE.  Faites une recherche sur Google pour votre navigateur préféré.

Vous trouverez plusieurs types d’extension vous permettant par exemple d’afficher le code source d’une page web, d’afficher la feuille de style, d’activer ou désactiver le javascript …

Conclusion

En conclusion, il est très facile de développer en HTML5 et surtout GRATUITEMENT. Nopedad++ ou TextWrangler, les cinq principaux navigateurs installé sur sa machine et c’est partis ! Vous avez désormais tous les outils à portés de main, il ne vous reste plus qu’à franchir le cap suivant et apprendre vos premières lignes de codes.