Les bases pour bien débuter en HTML

Afin de débuter dans de bonnes conditions, il est nécessaire de préparer ses outils et de comprendre le fonctionnement général du langage.

1. Environnement de travail

   Pour commencer il faut mettre en place ce qu’on appelle un IDE en anglais pour Integrated Development Environment. Ce qui signifie en français, dans le cadre du développement un environnement de travail.
   Dans le cas du langage HTML, on parle ici d’un éditeur de texte. Il existe de nombreux logiciels gratuits et de qualités. Vous pouvez tout à fait commencer avec Bloc-Notes pour créer un site. Cependant, en le complexifiant, vous allez rapidement devoir passer à quelque chose de plus performant.
   Il existe Notepad++, SublimeText, jEdit (fonctionne sous Mac), gEdit(fonctionne sous Linux) et bien d’autres encore.

   Pour ma part j’utilise Brackets, et je vous le recommande pour débuter et même pour les confirmés. En effet, il est très intuitif, récent, vous pouvez y ajouter des plugins, et il dispose de nombreuses fonctionnalités.
   Et ce qui fait un gros plus est la fonctionnalité Live Preview, car elle permet au navigateur d’interpréter  en temps réel le code source sans avoir à recharger la page, mais l’inconvénient majeur est qu’elle ne fonctionne que sous GoogleChrome.
   Vous pouvez télécharger Brackets en cliquant sur le logo ci-dessous.
   Il vous faudra donc aussi un navigateur, et si vous optez pour Brackets en éditeur, je vous recommande donc de télécharger GoogleChrome en cliquant également sur son logo.

                

    

2. Présentation et fonctionnement du langage HTML

   Tout d’abord il est nécessaire de comprendre comment fonctionne ce langage et son vocabulaire. Le HTML permet de structurer le contenu d’une page Web, de lui donner du sens et  de différencier les types d’éléments.
   Un élément est constitué d’une balise ouvrante <tag>  d’une balise fermantes </tag> et du contenu entre ces balises, le mot tag désignant la dénomination de la balise.
   Il existe également des éléments composés d’une seule balise qui sera dite “orpheline”, comme par exemple la balise <br> qui indique au navigateur un retour à la ligne (br pour break).

   

   Dans l’exemple ci-dessus, vous pouvez voir la structure de base de toute page Web.
   La première ligne est la ligne de déclaration du type de document, qui indique au navigateur dans quel type de HTML la page a été écrite. Auparavant la déclaration prenait cette forme suivante:
   <! DOCTYPE HTML PUBLIC “type d’HTML” “adresse de DTD”>
   L’adresse de DTD donnait l’URL du document spécifiant les propriétés de chaque élément du type d’HTML utilisé. L’arrivée du HTML5 a bien simplifié les choses. Il y a juste à écrire ce que vous voyez à la ligne 1.
   A la ligne 4, on voit la balise d’ouverture html, c’est le tag principal de la page. Ensuite, c’est un peu comme un humain, il a une tête et un corps ce tag, d’où les tags head et body.
   Dans le tag head, on va mettre principalement les informations relatives à la page qui ne font pas partie du contenu. Par exemple le titre de la page, du tag title, qui est le plus connu dans le head, et que l’on pourra retrouver dans l’onglet de la page.
   Dans le tag body, on retrouvera donc tout le contenu de la page Web. C’est à dire tous les éléments que va afficher le navigateur. Ici à titre d’exemple j’y ai mis une petite phrase. Voyons ce que cela donne sur mon navigateur:

   
   Voilà, vous avez le titre dans l’onglet et le contenu dans la page…

    

3. Structurer son code

   Pour finir il est très très important de structurer votre codage lorsque vous allez commencer à éditer votre site Web. Lorsque vous ouvrez un sous-élément dans un élément, pensez à le décaler d’une tabulation (touche tab) comme vous le voyez dans l’exemple (head par rapport à html, title par rapport à head on comprend visuellement que head est dans body, title dans head etc…). Votre rendu sera bien plus clair et lisible et vous fera gagner du temps. Avec Brackets, et d’autres éditeurs cela se fait automatiquement.

    

Conclusion

J’espère que cette introduction pour débuter sur le HTML vous a plu. N’hésitez pas à laisser un commentaire pour me donner vos impressions, à bientôt pour le prochain cours !!