Page Web Personnelle HTML : Créez votre site

Introduction

Bienvenue dans le projet de page web personnelle en HTML ! Dans ce laboratoire, vous allez construire un site web complet, d'une seule page, à partir de zéro en utilisant les blocs de construction fondamentaux du web : le HTML. Ce projet pratique est conçu pour les débutants et vous guidera à travers les balises et concepts essentiels nécessaires pour créer une page web structurée et riche en contenu.

Vous apprendrez à :

Définir la structure de base d'un document HTML.
Utiliser les titres et les paragraphes pour formater le texte.
Organiser l'information avec des listes.
Intégrer des images et créer des hyperliens.
Structurer des données avec des tableaux et créer un formulaire de contact simple.

Un serveur web et un style de base (CSS) ont été préconfigurés pour vous. Votre objectif principal sera d'écrire du HTML propre et sémantique. Vous pouvez prévisualiser votre travail en temps réel en passant à l'onglet Web 8080 dans l'environnement de laboratoire. Commençons !

Configurer la structure du document avec head et body

Dans cette étape, vous allez configurer la structure de base de votre document HTML. Chaque page HTML possède une structure standard de base qui inclut les balises <!DOCTYPE>, <html>, <head> et <body>.

<!DOCTYPE html> : Cette déclaration définit le type de document comme étant HTML5.
<html> : C'est l'élément racine d'une page HTML.
<head> : Cet élément contient des méta-informations sur le document, telles que son titre et les liens vers les feuilles de style. Le contenu à l'intérieur de <head> n'est pas affiché sur la page elle-même.
<title> : Ceci définit le titre de l'onglet du navigateur.
<body> : Cet élément contient le contenu visible de la page qui est affiché dans le navigateur.

Tout d'abord, ouvrez le fichier index.html situé dans le répertoire ~/project en utilisant l'explorateur de fichiers sur la gauche. Le fichier est actuellement vide. Copiez et collez le code suivant dans index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <!-- Content will go here in the next steps -->
    </div>
  </body>
</html>

Après avoir collé le code, enregistrez le fichier (Ctrl+S ou Cmd+S). Maintenant, cliquez sur l'onglet Web 8080 en haut de l'interface du laboratoire. Vous devriez voir une page vierge, mais remarquez que le titre de l'onglet du navigateur est maintenant "My Personal Webpage".

Ajouter du texte formaté avec des titres et des paragraphes

Dans cette étape, vous allez ajouter les premiers éléments de contenu visible à votre page web en utilisant des titres et des paragraphes. Ce sont des balises fondamentales pour structurer le texte.

<h1> : C'est une balise de titre de premier niveau, généralement utilisée pour le titre principal d'une page. Les moteurs de recherche utilisent les titres pour indexer la structure et le contenu de vos pages web.
<p> : C'est la balise de paragraphe, utilisée pour les blocs de texte.

Ajoutons votre nom comme titre principal et une courte biographie. Dans votre fichier index.html, trouvez le commentaire  à l'intérieur de <div class="container"> et remplacez-le par le code suivant :

<h1>John Doe</h1>
<p>
  Welcome to my personal webpage! I am a passionate web developer learning the
  fundamentals of HTML. I enjoy creating clean and efficient code to build
  beautiful and functional websites.
</p>

Votre fichier index.html complet devrait maintenant ressembler à ceci :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Personal Webpage</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h1>John Doe</h1>
      <p>
        Welcome to my personal webpage! I am a passionate web developer learning
        the fundamentals of HTML. I enjoy creating clean and efficient code to
        build beautiful and functional websites.
      </p>
    </div>
  </body>
</html>

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez maintenant votre nom et votre biographie affichés sur la page.

Insérer des listes pour les compétences ou les centres d'intérêt

Dans cette étape, vous utiliserez des listes pour organiser des informations, telles que vos compétences ou vos centres d'intérêt. HTML propose deux types principaux de listes : les listes non ordonnées (<ul>) pour les éléments sans ordre spécifique, et les listes ordonnées (<ol>) pour les éléments numérotés. Chaque élément d'une liste est défini avec une balise <li> (list item).

Ajoutons une section pour vos compétences en utilisant une liste non ordonnée. Ajoutez le code suivant sous la balise de paragraphe (<p>) que vous avez ajoutée à l'étape précédente.

<h2>My Skills</h2>
<ul>
  <li>HTML & CSS</li>
  <li>JavaScript</li>
  <li>Python</li>
  <li>Problem Solving</li>
</ul>

Ce code ajoute un titre de second niveau (<h2>) pour titrer la section et une liste non ordonnée (<ul>) avec quatre éléments de liste (<li>).

Après avoir ajouté le code, le <body> de votre fichier index.html devrait ressembler à ceci :

<body>
  <div class="container">
    <h1>John Doe</h1>
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>
  </div>
</body>

Enregistrez le fichier et vérifiez l'onglet Web 8080 pour voir votre nouvelle section de compétences avec une liste à puces.

Ajouter des liens et des images avec des attributs

Dans cette étape, vous rendrez votre page plus dynamique en ajoutant une image et un hyperlien.

<img> : La balise image est utilisée pour intégrer une image. C'est une balise auto-fermante qui nécessite deux attributs essentiels :
- src : Spécifie le chemin d'accès au fichier image.
- alt : Fournit un texte alternatif pour l'image, ce qui est important pour l'accessibilité et pour les cas où l'image ne peut pas être affichée.
<a> : La balise ancre est utilisée pour créer des hyperliens. L'attribut href spécifie l'URL vers laquelle le lien pointe.

Tout d'abord, ajoutons une photo de profil. Le script d'installation a déjà placé une image de substitution à l'emplacement images/profile.png. Ajoutez la balise <img> juste en dessous de la balise <h1>.

Ensuite, ajoutons un lien vers un site externe, comme un profil GitHub. Nous placerons cela dans une nouvelle section "Trouvez-moi en ligne". Ajoutez le code suivant sous votre liste de compétences :

<!-- Add this img tag below the h1 tag -->
<img src="images/profile.png" alt="A placeholder profile picture" />

<!-- Add this new section below the skills list -->
<h2>Find Me Online</h2>
<p>
  You can find my work on
  <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
</p>

L'attribut target="_blank" sur le lien indique au navigateur d'ouvrir le lien dans un nouvel onglet.

Le <body> de votre fichier index.html devrait maintenant être structuré comme suit :

<body>
  <div class="container">
    <h1>John Doe</h1>
    <img src="images/profile.png" alt="A placeholder profile picture" />
    <p>
      Welcome to my personal webpage! I am a passionate web developer learning
      the fundamentals of HTML. I enjoy creating clean and efficient code to
      build beautiful and functional websites.
    </p>

    <h2>My Skills</h2>
    <ul>
      <li>HTML & CSS</li>
      <li>JavaScript</li>
      <li>Python</li>
      <li>Problem Solving</li>
    </ul>

    <h2>Find Me Online</h2>
    <p>
      You can find my work on
      <a href="https://github.com/labex-labs" target="_blank">GitHub</a>.
    </p>
  </div>
</body>

Enregistrez le fichier et actualisez l'onglet Web 8080. Vous verrez l'image de profil et un lien cliquable.

Créer un tableau pour l'emploi du temps et un formulaire pour le contact

Dans cette dernière étape de contenu, vous ajouterez deux structures plus complexes : un tableau pour afficher un emploi du temps et un formulaire pour permettre aux visiteurs de vous contacter.

<table> : Définit un tableau.
- <tr> : Définit une ligne dans le tableau.
- <th> : Définit une cellule d'en-tête (en gras et centrée par défaut).
- <td> : Définit une cellule de données.
<form> : Définit un formulaire HTML pour la saisie utilisateur.
- <label> : Définit une étiquette pour un élément <input>.
- <input> : Définit un champ de saisie. L'attribut type peut être text, email, password, etc.
- <textarea> : Définit une zone de saisie de texte multiligne.
- <button> : Définit un bouton cliquable.

Tout d'abord, ajoutons un tableau pour un emploi du temps hebdomadaire. Ajoutez ce code sous la section "Trouvez-moi en ligne" :

<h2>My Schedule</h2>
<table>
  <tr>
    <th>Day</th>
    <th>Activity</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td>Web Development Practice</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>Project Building</td>
  </tr>
  <tr>
    <td>Friday</td>
    <td>Review and Refactor</td>
  </tr>
</table>

Ensuite, ajoutons un formulaire de contact. Ajoutez ce code sous le tableau que vous venez de créer :

<h2>Contact Me</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />

  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">Send Message</button>
</form>

Enregistrez le fichier et visualisez l'onglet Web 8080. Votre page personnelle est maintenant complète avec un emploi du temps et un formulaire de contact !

Résumé

Félicitations ! Vous avez réussi à créer une page web personnelle complète en utilisant HTML.

Dans ce laboratoire, vous avez pratiqué l'utilisation des éléments HTML les plus fondamentaux pour structurer un document et présenter du contenu. Vous avez appris à :

Créer le squelette de base d'une page HTML avec <html>, <head> et <body>.
Formater du texte avec des titres (<h1>, <h2>) et des paragraphes (<p>).
Organiser des éléments dans une liste non ordonnée (<ul>, <li>).
Intégrer une image (<img>) et créer un hyperlien (<a>).
Structurer des données dans un <table> et collecter des entrées utilisateur avec un <form>.

Vous avez maintenant une base solide en HTML. N'hésitez pas à expérimenter davantage en modifiant le contenu, en ajoutant plus de pages ou en explorant des balises HTML plus avancées. Continuez votre excellent travail dans votre parcours de développement web !

Page Web Personnelle en HTML