Créer une page web peut sembler complexe sans les bons outils.
Choisir un mauvais éditeur de texte ou une structure HTML incorrecte peut causer des erreurs frustrantes.
Cet article présente Visual Studio Code comme solution pour créer une page HTML avec une structure correcte et bien encodée.
Lancez votre carrière de développeur web avec une formation pratique.
Visual Studio Code : éditeur de texte
Avant de plonger dans la création de notre première page de code HTML, nous avons besoin d’un éditeur de texte ou IDE. Nous allons utiliser un éditeur de texte très populaire Visual Studio Code éditeur de code extensible développé en 2015 par Microsoft pour Windows, Linux et macOS , Prend en charge presque tous les principaux langages de programmation.
Passons à la partie pratique : l’installation
Tapez : Visual Studio code dans votre barre de recherche, cliquez sur le 1 er lien.
Sur la page d’accueil, cliquez sur le bouton de téléchargement adapté à votre système d’exploitation pour lancer le téléchargement du fichier d’installation.
Une fois le téléchargement terminé, ouvrez le fichier d’installation .exe . Double-cliquez dessus et suivez les instructions d’installation.
Dès que l’installation est terminée, lancer Visual Studio Code sur votre ordinateur.
Pour installer de nouveaux extensions, cliquez sur l’icône des extensions dans la barre latérale à gauche. Si vous voulez avoir la traduction en français de l’éditeur, recherchez « French language pack « , et cliquez sur « Install » pour l’installer. Une fois l’installation terminée, redémarrez VS code pour appliquer les modifications.
Maintenant cliquez sur l’icône Ouvrir un dossier (que vous avez déjà créez) pour ouvrir votre dossier
Ensuite pour cliquer sur nouveau fichier,
Et enregistrer le fichier avec l’extension .html , par exemple, « index.html »
Maintenait que votre fichier est créé vous pouvez commencer à écrire votre premier code HTML.
Structure HTML d'une page web
Avant de plonger dans la création de notre première page web, nous devons d’abord examinez l’anatomie de base d’une page HTML. Au cours de cette exploration, vous allez apprendre à constituer des pages html en passons en revue toutes les balises essentielles à la bonne constitution d’un fichier HTML.
Pour mieux comprendre cette partie, On va prendre comme exemple ce fichier HTML, index.html, qu’on va explorez :
Tout document doit donc débuter par la déclaration du doctype suivi de l’élément racine html qui inclut les éléments head et body .
- Le Doctype :La déclaration du doctype est traditionnellement utilisée pour spécifier le type de balisage du document. Celui de HTML5 est: <!DOCTYPE html>
- L’élément <html> :est l’élément racine du document englobe l’ensemble du document HTML, il peut posséder plusieurs attributs .
- La balise head :permet de regrouper des informations indispensables pour le référencement de la page. Il Contient des métadonnées sur la page, comme le titre, les liens vers des feuilles de style, des scripts, etc ..
- La balise title :Définit le titre de la page qui s’affiche dans l’onglet du navigateur. L’en-tête doit contenir un seul titre, clair et précis.
- La balise body :Le corps du document qui contient tous les éléments visibles à partir d’un navigateur : les liens, le texte, les images, les éléments multimédias, les formulaires, etc.
N’oubliez pas l’importance d’imbriquer correctement vos balises et les fermer soigneusement, et respecter la hiérarchie des balises pour assurer une syntaxe correcte.
Créer une page HTML avec VS Code
Après avoir mis en place la structure d’une page web, il est temps pour nous d’écrire notre page web, si on veut afficher du contenu sur la page on doit écrire entre la balise body .
Pour ajouter du contenu à l’intérieur de la balise <body> , vous pouvez utiliser différentes balises HTML , la balise <p> est couramment utilisé pour définir des paragraphes , voici un simple exemple :
On obtient le résultat suivant :
En revanche on peut affronter des problèmes si on change de navigateur. On peut avoir un résultat comme celui-là. Ceci est lié à la gestion des caractères spéciaux, en particulier les accents.
Pour éviter ces problèmes, le HTML doit être correctement encodé pour assurer l’affichage correct des caractères spéciaux tels que les accents : c’est ce que nous allons voir dans la partie suivante.
Utiliser l'entête dans HTML
Dans cette partie, nous allons faire un zoom sur l’entête, c’est-à-dire sur les balises < head>. Notre attention va se porter sur les balises ‘ <meta>’ Ces balises sont composées d’informations descriptive sur le site, elles seront analysées par les robots pour permettre une indexation dans les moteurs de recherche c’est pourquoi elles doivent être correctement remplies.
Pour résoudre le problème des caractères spéciaux que nous avons vu avant, on va utiliser la balise <meta charset= »UTF-8″> , elle déclare l’encodage des caractères utilisé dans une page HTML.
On va ajouter cette balise a l’exemple précédant :
Voilà, actualisez votre page, le problème des accents est résolu :
Il existe deux type de balises méta :
Les balises meta « name » qui permette de décrire la page.
Les balises meta « http-equiv » qui envoie des informations supplémentaires via le protocole http.
Pour les balises meta "name" :
Elles désignent :
- L’auteur de la page grâce au mot clé author :
<meta name="author"content="Nom de la personne qui a réalisé la page"/>
- L’adresse mail de l’auteur grâce au mot clé Made :
< meta name ="Made" content="adresse@eMail" />
- Une description de la page grâce au mot clé description :
<meta name="description"content="Brève description de la page ici" />
- Une liste de mots clés pour qualifier la page grâce au mot clé keywords :
<meta name="keywords" content="mot clé 1, mot clé 2, mot clé 3" />
- Le logiciel utilisé pour réaliser la page grâce au mot clé generator :
<meta name="generator" content="Adobe Dreamweaver" />
- Diriger les robots pour l’indexation de la page :
<meta name="robots" content="attribut1 , attribut2">
Où les champs ATTRIBUT1 et ATTRIBUT2 peuvent prendre les valeurs suivantes :
- ATTRIBUT1 :
index :page à indexer par le robot
noindex : interdiction d’indexer la page
- ATTRIBUT2 :
Follow: le robot peut suivre les liens contenus dans la page pour indexer d’autres documents nofollow : le robot ne peut pas suivre les liens de la page
Balises meta et référencement
Elles permettent :
- De préciser l’encodage utilisé pour la page grâce au mot clé Content-Type..
Exemple pour un encodage au format UTF-8 :
<meta charset="UTF-8">
- De préciser une date d’expiration pour la page grâce au mot clé expires :
<meta http-equiv="expires"content="Date" />
- De demander à la page de se raffraichir toutes les N secondes grâce au mot clé refresh.
<meta http-equiv="refresh" content="N" />
- De rediriger le visiteur vers une autre page au bout de N secondes grâce au mot clé
refresh et à la précision URL=chemin-vers-ma-page .
<meta http-equiv="refresh" content="N;URL= chemin-vers-ma-page">
Configurer la langue HTML
Afin de clôturer ce chapitre, il nous reste à voir la langue utilisée dans la page web. La déclaration correcte de celle-ci est importante pour assurer une expérience utilisateur optimale et pour permettre aux moteurs de recherche de comprendre le contenu de votre site.
En utilisant l’attribut lang : indique la langue utilisée par défaut dans la page. Cette
valeur sera reconnue par les moteurs de recherche pour leur permettre d’indexer les pages du site en effectuant un tri par langue.
Exemple : <html l ang = « fr » >
Vous pouvez aussi ajouter l’attribut dir : indique le sens de lecture du texte de la page. Il peut prendre les valeurs ltr pour le texte qui se lit de gauche à droite (langues européennes) ou rtl pour le texte qui se lit de droite à gauche.
Syntaxe : <html lang= « fr » dir= »ltr » >
En résume, ce chapitre nous a guidé à travers l’étape essentielle de la construction de notre première page web, mettant en avant l’utilisation de VS code comme éditeur de texte. Nous avons explorer la structure de base d’une page HTML, l’importance des balises meta dans la résolutions de problèmes potentiels, tout en s’approfondissant sur les balises head . En comprenant leur utilisation, notamment pour la gestion des langues et l’indexation par les moteurs de recherche, nous avons jeté les bases d’une création de pages web robuste et bien référencée
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment installer Visual Studio Code?
Quelle est la structure de base d'une page HTML?
Comment résoudre les problèmes d'encodage de caractères en HTML?
Quels sont les rôles des balises meta en HTML?
Comment définir la langue d'une page web?
Conclusion
En comprenant les bases de l’édition avec Visual Studio Code et la création de pages HTML, vous êtes en bonne voie pour concevoir des sites web efficaces. Quel sera votre prochain projet web à explorer?
