Editeur de texte
Visual Studio Code
Pour commencer, il faut aller télécharger un éditeur de texte. Un éditeur de texte est un logiciel qui permet d'écrire et de modifier du code source. Il en existe plusieurs, mais nous allons utiliser Visual Studio Code (VS Code) car il est gratuit, puissant et facile à utiliser. Vous pouvez le télécharger depuis le site officiel : https://code.visualstudio.com/.
Source : Visual Studio Code - Site officiel
VS Code en français
Après avoir installé VS Code, vous pouvez le configurer en français en suivant ces étapes :
- Ouvrez VS Code.
- Cliquez sur l'icône des extensions dans la barre latérale gauche (ou appuyez sur Ctrl + Shift + X).
- Recherchez French Language Pack for Visual Studio Code.
- Cliquez sur Installer pour installer le pack de langue.
- Après l'installation, redémarrez VS Code pour appliquer les changements.
Créer un dossier projet
Il existe plusieurs façons de créer un dossier projet pour votre code HTML. Voici ces méthodes :
- Par glisser-déposer
- Sur votre bureau (ou dans un autre emplacement de votre choix), faites un clic droit et sélectionnez Nouveau → Dossier.
- Nommez le dossier mon-premier-site (ou un autre nom de votre choix).
- Ouvrez VS Code et faites glisser le dossier mon-premier-site dans la fenêtre de VS Code pour l'ouvrir.
- Par le menu contextuel de Windows Explorer
- Sur votre bureau (ou dans un autre emplacement de votre choix), faites un clic droit et sélectionnez Nouveau → Dossier.
- Nommez le dossier mon-premier-site (ou un autre nom de votre choix).
- Ouvrez le dossier mon-premier-site, faites un clic droit à l'intérieur du dossier et sélectionnez Ouvrir avec Code.
- Depuis l'interface de VS Code
- Ouvrez VS Code.
- Cliquez sur Fichier → Ouvrir un dossier....
- Sélectionnez ou créez un dossier nommé mon-premier-site (ou un autre nom de votre choix) et cliquez sur Ouvrir.
Créer des dossiers et des fichiers
Source : Mon PC
Dans l'image ci-dessus, l'icône avec un dossier et un signe + (encadré en vert sur l'image) permet de créer un nouveau dossier, tandis que l'icône avec une feuille et un signe + (encadré en rouge sur l'image) permet de créer un nouveau fichier. Cliquez sur ces icônes pour organiser votre projet en créant des dossiers (par exemple, un dossier images pour stocker vos images) et des fichiers (par exemple, un fichier index.html pour votre page HTML principale).
Etat du fichier ouvert
Un fichier ouvert dans VS Code affiche un point blanc (ou noir en fonction du thème de l'interface) à côté de son nom dans l'onglet supérieur ainsi que dans le menu de gauche dans la partie Editeurs ouverts de l'explorateur (voir l'image ci-dessous). Cela indique que le fichier a été modifié mais pas encore enregistré. Pour enregistrer les modifications, vous pouvez utiliser le raccourci clavier Ctrl + S.
Source : Mon PC
Structure de base d'une page web
Astuce :
Indentation : L'indentation consiste à ajouter des espaces ou des tabulations au début de chaque ligne de code pour montrer quelles balises sont à l'intérieur d'autres balises. Par exemple, le contenu d'une balise
La balise seule <!DOCTYPE html>
La balise <!DOCTYPE html> est une déclaration spéciale qui doit être placée au tout début de chaque document HTML. Elle informe le navigateur que le document est écrit en HTML5, la version la plus récente du langage HTML. Cette déclaration est essentielle pour garantir que le navigateur interprète correctement le code HTML et affiche la page web comme prévu.
La balise paire <html></html>
La balise <html></html> est la balise racine qui englobe tout le contenu de la page web. Elle indique au navigateur que tout ce qui se trouve entre ces deux balises constitue un document HTML. C'est la première balise paire que vous devez inclure après la déclaration <!DOCTYPE html>.
La balise paire <head></head>
La balise <head></head> contient des informations méta sur la page web, telles que le titre, les liens vers les feuilles de style CSS, les scripts JavaScript, etc. Cette balise n'est pas visible directement sur la page web, mais elle est essentielle pour le bon fonctionnement et le référencement de la page.
La balise paire <title></title>
La balise <title></title> est utilisée pour définir le titre de la page web. Le contenu de cette balise s'affiche dans l'onglet du navigateur et est également utilisé par les moteurs de recherche pour référencer la page. Il est important de choisir un titre pertinent et descriptif pour améliorer l'expérience utilisateur et le référencement.
La particularité est que la CSS ne peut pas mettre en forme cette balise. Donc si l'on souhaite que tout soit en majuscule, il est nécessaire de l'écrire en majuscule dans le fichier *.html.
La balise paire <body></body>
La balise <body></body> contient tout le contenu visible de la page web, comme les titres, les paragraphes, les images, les liens, etc. C'est dans cette section que vous allez écrire le code HTML qui sera affiché aux visiteurs de votre site.
Afficher le code source de la page
Pour voir le code source HTML d'une page web dans votre navigateur, vous pouvez faire un clic droit n'importe où sur la page et sélectionner Afficher le code source de la page (ou une option similaire selon le navigateur). Cela ouvrira une nouvelle fenêtre ou un nouvel onglet affichant le code HTML brut de la page.
Pour Chrome et Edge, vous pouvez également utiliser le raccourci clavier Ctrl + U.
Cette option permet de voir exactement la même chose que ce que vous écrivez dans votre fichier HTML, car le navigateur interprète et affiche le code source tel qu'il est écrit.
Astuce :
Si l'extension Live Server est installée dans votre éditeur de code, vous pouvez l'utiliser pour voir les modifications en temps réel sans avoir à actualiser manuellement la page. Cependant, le contenu de la source va changer pour ajouter une balise <script> à la fin de la balise <body> qui permet cette fonctionnalité.
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html
Notre première page web
Ajout de paragraphes
La balise <p></p> est utilisée pour définir un paragraphe de texte. Cette balise est de type block ce qui signifie qu'elle occupe toute la largeur disponible et commence toujours sur une nouvelle ligne. Le contenu entre ces balises sera affiché comme un bloc de texte distinct sur la page web.
Nous allons maintenant ajouter 2 paragraphes dans la section <body> de notre page web du fichier toto.html précédent :
<body>
<p>
Je suis un paragraphe.
</p>
<p>
Il fait chaud, normal on est en été !
</p>
</body>En fonction du navigateur, il est possible que les caractères spéciaux comme les accents n'apparaissent pas correctement. Nous verrons dans la prochaine section comment régler ce problème.
Source : Alphorm.com → Formation HTML et CSS → Le guide du débutant
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html
Zoom sur l'entête
La balise <meta charset>
Pour que les caractères spéciaux comme les accents s'affichent correctement dans notre page web, nous devons spécifier le jeu de caractères utilisé. Le jeu de caractères le plus couramment utilisé pour le web est UTF-8, qui prend en charge une large gamme de caractères, y compris les accents français. Pour définir le jeu de caractères dans notre page HTML, nous allons ajouter une balise <meta> dans la section <head> de notre document.
Voici comment ajouter la balise <meta charset="UTF-8"> dans notre fichier toto.html :
<head>
<meta charset="UTF-8">
</head>La balise <meta name="viewport">
La balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> est essentielle pour garantir que votre page web s'affiche correctement sur tous les types d'appareils, y compris les smartphones et les tablettes. Cette balise indique au navigateur comment ajuster la mise en page de la page en fonction de la taille de l'écran de l'appareil utilisé pour la visualiser. En définissant la largeur du viewport à la largeur de l'appareil (width=device-width) et en fixant le niveau de zoom initial à 1.0 (initial-scale=1.0), vous assurez une expérience utilisateur optimale sur différents appareils. Autrement dit, 1 pixel sera toujours égal à 1 pixel, quel que soit l'appareil utilisé.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>La balise <meta name="description">
La balise <meta name="description" content="Description de la page"> est utilisée pour fournir une brève description du contenu de la page web. Cette description est souvent affichée dans les résultats des moteurs de recherche sous le titre de la page, ce qui peut influencer le taux de clics des utilisateurs. Il est important de rédiger une description claire et concise qui reflète fidèlement le contenu de la page afin d'attirer les visiteurs potentiels.
<head>
<meta name="description" content="Description de la page">
</head>La balise <meta name="keywords">
La balise <meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3"> est utilisée pour spécifier une liste de mots-clés pertinents liés au contenu de la page web. Ces mots-clés aident les moteurs de recherche à comprendre le sujet de la page et à l'indexer correctement. Bien que l'importance de cette balise ait diminué au fil du temps en raison des abus passés, il peut toujours être utile d'inclure des mots-clés pertinents pour améliorer le référencement de votre page.
<head>
<meta name="keywords" content="mot-clé1, mot-clé2, mot-clé3">
</head> Astuce :
Les mots-clés doivent être séparés par des virgules et ne doivent pas contenir d'espaces inutiles. Par exemple, utilisez clé1,clé2,clé3 au lieu de clé 1, clé 2, clé 3. Cela garantit que chaque mot-clé est correctement reconnu par les moteurs de recherche. majuscules et minuscules ne font pas de différence pour les moteurs de recherche, donc vous pouvez choisir la casse qui vous convient le mieux.
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html
Langue de la page
L'attribut lang de la balise <html>
L'attribut lang de la balise <html> est utilisé pour spécifier la langue principale du contenu de la page web. Cela aide les moteurs de recherche et les technologies d'assistance, comme les lecteurs d'écran ou la traduction automatique via le navigateur, à comprendre la langue dans laquelle le contenu est écrit. Par exemple, pour une page en français, vous ajouteriez l'attribut lang="fr" à la balise <html> comme suit :
<html lang="fr">
...
</html>En spécifiant la langue, vous améliorez l'accessibilité de votre site web et contribuez à une meilleure expérience utilisateur pour les visiteurs de différentes régions linguistiques.
Fichier exercice
Le fichier exercice correspondant à cette section peut se télécharger ici : toto.html