Créez votre première page HTML dans WebIDE

Introduction

Dans ce laboratoire, vous apprendrez à créer votre première page HTML en utilisant WebIDE (similaire à VS Code), un éditeur de code puissant et populaire pour le développement web.

Ce didacticiel complet couvre des aspects clés tels que la configuration de WebIDE, la génération d'un modèle de base HTML5, l'ajout de contenu de base à votre page web et la prévisualisation du résultat dans un navigateur web. En suivant ces instructions étape par étape, vous acquerrez une expérience pratique des bases du développement web et vous construirez une solide fondation pour créer des pages web interactives et structurées.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/lang_decl("Language Declaration") html/BasicStructureGroup -.-> html/viewport("Viewport Declaration") html/TextContentandFormattingGroup -.-> html/text_head("Text and Headings") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/head_elems -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/lang_decl -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/viewport -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/text_head -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/lists_desc -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/nav_links -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} html/doc_flow -.-> lab-451041{{"Créez votre première page HTML dans WebIDE"}} end

Créer un nouveau fichier HTML

LabEx WebIDE offre un environnement de développement moderne, similaire à VS Code, pour les tâches de codage. WebIDE est particulièrement adapté aux projets de développement web, y compris HTML, CSS et JavaScript.

Pour commencer, ouvrez WebIDE en cliquant sur l'onglet "WebIDE" dans l'interface de LabEx. WebIDE affiche un explorateur de fichiers à gauche et un éditeur de code à droite. Il y a également un terminal et d'autres outils en bas.

Vue d'ensemble de l'interface de LabEx WebIDE

Explorateur de fichiers : Affiche la structure du répertoire du projet, où vous pouvez créer, modifier et gérer des fichiers. Le répertoire de travail par défaut est ~/project.
Éditeur de code : Fournit un éditeur de texte pour écrire et modifier du code. Vous pouvez créer de nouveaux fichiers, ouvrir des fichiers existants et visualiser les modifications du code.
Terminal : Offre une interface en ligne de commande pour exécuter des commandes shell, installer des packages et gérer des fichiers. Vous pouvez exécuter des commandes directement dans le terminal. Le répertoire de travail par défaut est ~/project.

Dans cette étape, vous apprendrez à créer un nouveau fichier HTML dans WebIDE. HTML (HyperText Markup Language) est le langage de balisage standard pour créer des pages web. Chaque page web commence par un fichier HTML.

Dans WebIDE, suivez ces étapes pour créer un nouveau fichier HTML :

Cliquez sur le menu "File"
Sélectionnez "New File"
Enregistrez le fichier sous le nom index.html

Création d'un nouveau fichier HTML dans WebIDE

Alternativement, vous pouvez utiliser le raccourci clavier Ctrl+N pour créer un nouveau fichier, puis l'enregistrer sous le nom index.html.

Lorsque vous nommez des fichiers HTML, rappelez-vous ces règles importantes :

Utilisez des lettres minuscules
Utilisez l'extension de fichier .html
Évitez les espaces dans les noms de fichiers
Utilisez des noms descriptifs comme index.html, about.html, etc.

Vérifions que le fichier a été créé via le terminal :

ls ~/project

Exemple de sortie :

index.html

Le fichier est maintenant prêt pour que vous commenciez à ajouter du contenu HTML dans les étapes suivantes. L'extension .html indique aux navigateurs web qu'il s'agit d'un document HTML.

Si vous êtes familier avec le terminal, vous pouvez également créer le fichier en utilisant la commande suivante :

touch ~/project/index2.html

Apprenez-en plus sur les commandes Linux pour améliorer vos compétences en terminal.

Générer un modèle de base HTML5

Dans cette étape, vous apprendrez à générer un modèle de base HTML5 standard dans WebIDE. Un modèle de base (boilerplate) est un modèle standard qui fournit la structure de base pour un document HTML.

Dans WebIDE, vous pouvez rapidement générer un modèle HTML5 en utilisant un raccourci intégré. Suivez ces étapes :

Ouvrez votre fichier index.html
Tapez ! (point d'exclamation)
Appuyez sur la touche Tab

Cela générera automatiquement un modèle HTML5 complet avec tous les éléments essentiels :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

Démonstration de la génération du modèle HTML5

Astuce : Vous pouvez copier-coller le code du modèle dans votre fichier index.html si le raccourci ne fonctionne pas.

Décortiquons les éléments clés de ce modèle HTML5 :

<!DOCTYPE html> déclare que ceci est un document HTML5
<html lang="en"> est l'élément racine avec une spécification de langue
<head> contient les métadonnées du document
<meta charset="UTF-8"> spécifie l'encodage des caractères
<meta name="viewport"> assure un affichage correct sur les appareils mobiles
<title> définit le titre de la page affiché dans l'onglet du navigateur
<body> est l'endroit où vous ajouterez le contenu de votre page

Vous pouvez modifier la balise <title> pour donner un nom significatif à votre page.

Ajouter du contenu de base à une page HTML

Dans cette étape, vous apprendrez à ajouter du contenu de base à votre page HTML en utilisant différents éléments HTML. HTML utilise des balises pour structurer et afficher le contenu sur une page web.

Ouvrez votre fichier index.html dans WebIDE et remplacez la section <body> vide par le contenu suivant :

Astuce : Copiez-collez le extrait de code dans votre fichier index.html pour ajouter du contenu. Remplacez le contenu existant <body></body>. Nous apprendrons plus sur les éléments HTML dans les prochains laboratoires.

<body>
  <h1>Welcome to My First Web Page</h1>
  <p>
    This is a paragraph of text. HTML allows you to create different types of
    content easily.
  </p>

  <h2>My Favorite Hobbies</h2>
  <ul>
    <li>Coding</li>
    <li>Reading</li>
    <li>Traveling</li>
  </ul>

  <h2>Quick Links</h2>
  <a href="https://www.example.com">Visit Example Website</a>
</body>

Décortiquons les éléments HTML utilisés :

<h1> et <h2> sont des balises de titre (h1 est le titre principal, h2 est un sous-titre)
<p> est utilisée pour les paragraphes de texte
<ul> crée une liste non ordonnée (à puces)
<li> représente les éléments de liste
<a> crée un lien hypertexte vers une autre page web

Ces éléments de base vous aident à structurer et à présenter le contenu de votre page web. Expérimentez avec différentes balises pour voir comment elles changent l'apparence et la mise en page de votre contenu.

Quelques conseils supplémentaires pour les débutants :

Toujours fermer vos balises HTML
Utiliser un contenu significatif et descriptif
Indentez votre code pour une meilleure lisibilité

Prévisualiser et afficher le HTML dans un navigateur

Dans cette étape, vous apprendrez à prévisualiser et afficher votre page HTML dans un navigateur web. La machine virtuelle (VM) LabEx propose une fonctionnalité de prévisualisation dans le navigateur intégrée à WebIDE.

Pour prévisualiser votre fichier HTML :

Dans WebIDE, cliquez sur le bouton "Go Live" en bas à droite.
Un nouvel onglet de navigateur s'ouvrira avec votre page HTML affichée.
Ou, vous pouvez cliquer sur l'onglet "Web 8080" pour ouvrir la prévisualisation.

Cela entraînera automatiquement les actions suivantes :

Démarrer un serveur web
Ouvrir votre page HTML dans une fenêtre de prévisualisation
Fournir des mises à jour en temps réel lorsque vous modifiez votre code

Astuce : La VM LabEx héberge la prévisualisation sur le port 8080. Vous pouvez partager le lien de prévisualisation avec d'autres personnes pour montrer votre travail. Une fois votre machine virtuelle de laboratoire arrêtée, le lien de prévisualisation ne fonctionnera plus.

Points clés à observer :

La page s'affiche avec différentes tailles de titres
La liste apparaît sous forme de puces
Le lien est cliquable
Le titre de la page apparaît dans l'onglet du navigateur

Résumé

Ce laboratoire a guidé les apprenants à travers les étapes initiales du développement HTML, en mettant l'accent sur la création d'un nouveau fichier HTML et la compréhension de la structure fondamentale de la création de pages web. En suivant les instructions étape par étape, les participants ont acquis une expérience pratique dans l'utilisation de WebIDE comme outil de développement et ont appris les compétences essentielles nécessaires pour commencer à construire des pages web avec HTML5.