Première chose à apprendre HTML

A ce jour j’ai terminé tout le cours sur le HTML5/CSS3  avec un score de 95% (fier le type!).

Ce cours m’a permis à apprendre à structurer une page en HTML, à faire des liens, des listes, insérer des images, etc.

Ce qui est assez marrant quand on y connait rien en programmation, c’est que le simple fait de se mettre à faire une page complète  en HTML, on a la sensation que ça y est, on entre dans la matrice et on peut cracker le système de la NASA!

Alors en fait non, on se calme, HTML ce n’ai pas vraiment un langage de programmation, c’est  juste un langage permettant de structurer le contenu de sa page, créer des paragraphes(p), des blocs de texte, des titres(h1, h2,…),des listes (ul>li), etc. Ce qui m’a frappé lors de mon début d’apprentissage du HTML, c’est que j’avais l’impression de faire des développements et factorisations au collège. La première parenthèse qu’on ouvre, c’est la dernière qu’on referme. Il y a des balises ouvrantes, des balises fermantes, et des balises orphelines que l’on n’a pas besoin de refermer. Les erreurs que je faisais régulièrement, c’était justement que je refermais mal les balises, j’oubliais souvent le /(slash) .

Essai de repérer ces types de balises dans le projet dont je parle plus bas.

Avec toutes ces premières balises, j’ai été capable rapidement de faire le premier mini projet qui était de structurer son CV.

Voilà donc le résultat:

mon-premier-projet-ocr

On est d’accord, c’est pas le projet le plus sexy du monde, mais il faut bien démarrer par quelque chose… On est aussi d’accord pour dire, que ça fait pas trop science fiction, et qu’on ne va pas aller chatouiller la NASA avec ça…

Structurer le contenu

Tu peux distinguer les titres, les listes, un peu de texte en italique, des liens ( en bleu). La structure de la page est donc posée. Pour voir le fichier HTML, c’est par ici, sinon je l’ai ajouté sur Codepen (le problème avec Codepen au départ, c’est qu’il n’est pas intuitif d’insérer des images. Il faut trouver une image en ligne, aller chercher l’URL avec l’inspecteur de ton navigateur, clic droit-inspecter).

Sans trop rentrer dans les détails, on peut voir que plusieurs parties se dessinent:

  • Le DOCTYPE: cette déclaration permet d’indiquer à ton navigateur que tu vas écrire du html. Il a été  simplifier avec HTML 5 car dans les versions précédentes il était beaucoup  plus long, là tu vois c’est assez facile à retenir!
  • la balise <html></html> va contenir l’intégralité de ton code html.
  • la balise <head></head> va contenir  le titre du site, balise title (visible dans l’onglet du navigateur, et l’encodage  charset (qui gère l’affichage des caractères spéciaux: les accents par exemple). Le contenu de cette balise n’est pas visible par l’utilisateur.
  • la balise body va contenir tout le contenu de la page html, et ce que verra l’utilisateur.

Pour le HTML, je m’arrête là pour le moment, je ne vais pas en faire des tonnes. Il existe une quantité de cours, d’exercices sur ce sujet. En revanche, le CSS est beaucoup plus ludique à apprendre puisqu’il permet de rendre le HTML beau, et il nous permettra de continuer à faire du HTML avec d’autre balise que celle que tu peux voir dans le Codepen. On verra ça plus en détail car c’est vraiment vaste comme sujet, et j’ai encore plein de chose à apprendre en CSS.

En HTML, je parlerais principalement des formulaires, car c’est assez vaste je trouve et ça me permettra  de me remettre un, peu dedans. On essaiera d’ajouter du CSS, car j’ai tendance pour l’instant à faire des formulaires assez moches…

Donc à bientôt pour parler de CSS.

Guillaume