HTML 5 - 2.1 Les premiers pas avec html

Bienvenue dans ce cours d'HTML5. Cette leçon couvre la syntaxe HTML et les premiers pas avec le langage. Pour commencer, vous avez besoin d'un éditeur de texte : VS Code est utilisé ici. Créez un dossier sur votre bureau (au nom de votre choix), puis à l'intérieur, créez un fichier nommé syntaxe.html. Vous pouvez aussi le créer directement depuis VS Code via l'option « Nouveau fichier ». Une fois fait, ouvrez ce fichier avec Chrome (ou tout autre navigateur) et placez la fenêtre à côté de VS Code : cela permettra de voir les modifications en direct sur le site lors de chaque actualisation.

Balises, attributs et commentaires

Tout fichier HTML commence par le <!DOCTYPE>. Pour écrire du code HTML, on utilise des balises : la balise <p> pour un paragraphe, <img> pour une image, <title> pour le titre, etc. Il existe énormément de balises. On distingue les balises ouvrantes/fermantes (la fermante a un slash juste après le chevron ouvrant) et les balises simplement ouvrantes (auto-fermantes). VS Code signale immédiatement les erreurs de syntaxe, par exemple un espace dans la balise n'est pas autorisé.

Avec une balise paragraphe <p>Coucou</p>, sauvegardez et actualisez la page : le mot « Coucou » s'affiche. Modifions cela avec <title>syntaxe</title> placé dans le head : le titre apparaît maintenant dans l'onglet du navigateur. Pour la balise <img>, on utilise les attributs : src définit la source de l'image (par exemple profil.jpg), et width définit sa taille (par exemple 300). Par convention, on ne met pas d'espaces autour du signe égal : src="profil.jpg" est plus lisible que src = "profil.jpg". La balise se termine par un chevron fermant : on a toujours un chevron ouvrant et un chevron fermant.

Certains attributs n'ont pas de valeur, comme input qui peut accepter un attribut required sans valeur : il marque simplement que le champ est obligatoire. Enfin, on peut ajouter des commentaires qui n'apparaîtront pas sur le site mais resteront visibles dans le code pour les développeurs. Pour cela, on utilise la syntaxe <!-- mon commentaire -->. VS Code affiche ces commentaires en vert pour les distinguer du reste du code. Après actualisation de la page, le commentaire ne s'affiche pas dans le navigateur : il sert uniquement à titre d'information pour le développeur. Voilà pour la syntaxe HTML !

En résumé

Cette leçon présente les fondamentaux de la syntaxe HTML pour débuter. Elle couvre la création d'un fichier HTML avec VS Code, la compréhension des balises HTML essentielles (p, img, title, input), l'utilisation des attributs avec leurs valeurs (src, required), et l'ajout de commentaires dans le code qui n'apparaissent pas sur la page affichée.

Points clés

  • Utiliser un éditeur de texte comme VS Code pour créer et éditer des fichiers HTML, puis visualiser le résultat en temps réel dans un navigateur web
  • Les balises HTML sont les fondations du code; certaines sont ouvrantes et fermantes (par exemple <p>...</p>), d'autres sont auto-fermantes (par exemple <img>)
  • Les attributs HTML ajoutent des propriétés aux balises (src pour spécifier une image, required pour rendre un champ obligatoire)
  • Respecter une syntaxe stricte sans espaces inutiles pour éviter les erreurs détectées par VS Code
  • Ajouter des commentaires HTML avec <!-- --> pour documenter le code sans que cela s'affiche sur la page web

Questions fréquentes

Comment créer et afficher mon premier fichier HTML?

Créez un dossier sur votre bureau, ouvrez-le avec VS Code et créez un nouveau fichier avec l'extension .html (par exemple syntaxe.html). Ouvrez ensuite ce fichier dans votre navigateur pour visualiser les modifications en direct.

Quelle est la différence entre une balise ouvrante/fermante et une balise auto-fermante?

Les balises ouvrantes et fermantes comme <p>contenu</p> encadrent du contenu. Les balises auto-fermantes comme <img> ou <input> ne possèdent pas de balise de fermeture.

Comment ajouter un commentaire personnel en HTML sans qu'il s'affiche sur la page?

Utilisez la syntaxe <!-- votre commentaire -->. Le texte entre les tirets n'apparaîtra pas sur le site web mais sera visible uniquement dans le code source.