Cette série de didacticiels vous guidera dans la création et la personnalisation plus poussée de ce site Web à l’aide du HTML, le langage de balisage standard utilisé pour afficher des documents dans un navigateur Web. Aucune expérience préalable du codage n’est nécessaire, mais nous vous recommandons de commencer au début de la série si vous souhaitez recréer le site Web de démonstration.
À la fin de cette série, vous devriez avoir un site Web prêt à être déployé sur le cloud et une familiarité de base avec HTML. Savoir écrire du HTML constituera une base solide pour l’apprentissage d’autres compétences de développement Web frontal, telles que CSS et JavaScript.
Ce tutoriel vous présentera un document HTML de base et vous apprendra à afficher le code source d’un document HTML dans un navigateur.
Le HTML est utilisé pour baliser un document avec des instructions qui indiquent à un navigateur comment afficher et interpréter le contenu du document. Par exemple, le HTML peut indiquer au navigateur quel contenu textuel doit être interprété comme un titre et quel contenu textuel doit être interprété comme des paragraphes. Le langage HTML est également utilisé pour ajouter des images et attribuer des liens au texte et aux images. Ces instructions sont communiquées par le biais de balises HTML, qui s’écrivent comme suit : <tagname>. De nombreuses balises, mais pas toutes, utilisent une balise ouvrante et une balise fermante pour envelopper le contenu qu’elles servent à modifier.
Pour avoir une idée de la façon dont ces balises sont utilisées, inspectons un extrait de code HTML. Le code HTML ci-dessous montre comment les balises HTML sont utilisées pour structurer le texte et ajouter des liens et des images. Ne vous inquiétez pas si vous ne comprenez pas immédiatement les balises – nous les étudierons dans le prochain tutoriel.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Ce code HTML est rendu dans le navigateur comme suit :
Vous devriez maintenant avoir compris comment le code HTML d’exemple est rendu dans un navigateur. Ensuite, nous allons apprendre à visualiser le code source de n’importe quelle page Web à l’aide d’un outil de navigateur.
Voir le code source d’une page Web
Presque toutes les pages Web que vous rencontrez utilisent le langage HTML pour structurer et afficher les pages HTML. Vous pouvez inspecter le code source de n’importe quelle page web en utilisant un navigateur web comme Firefox ou Chrome. Sur Firefox, naviguez jusqu’à l’élément de menu « Outils » dans le menu supérieur et cliquez sur « Développeur Web/Source de la page » comme suit :
Sur Firefox, vous pouvez également utiliser le raccourci clavier Command-U pour afficher le code source d’une page Web.
Sur Chrome, le processus est très similaire. Naviguez jusqu’à l’élément de menu supérieur « Affichage » et cliquez sur « Développeur/Voir la source ». Vous pouvez également utiliser le raccourci clavier Option-Command-U.
Essayez d’inspecter le code source du site web de démonstration que nous allons construire dans cette série de tutoriels. Vous devriez recevoir une page comportant beaucoup plus de balises HTML que notre exemple ci-dessus. Ne vous alarmez pas si cela vous semble écrasant. À la fin de cette série de tutoriels, vous devriez mieux comprendre comment interpréter le code source HTML et comment utiliser le HTML pour construire et personnaliser vos propres sites Web.
Note : comme mentionné ci-dessus, vous pouvez inspecter le code source de n’importe quelle page web à l’aide d’outils du navigateur web Firefox ou Chrome. Essayez d’inspecter le code de quelques-uns de vos sites Web préférés pour avoir une idée du code sous-jacent qui structure les documents Web. Bien que le code source de ces sites contienne probablement plus de langages que le HTML, apprendre le HTML en premier lieu vous aidera à vous préparer à apprendre d’autres langages et cadres de travail pour la création de sites Web plus tard si vous le souhaitez.