Découvrez le plaisir d'être propriétaire d'un animal de compagnie : Pet's House

Introduction

Nous entreprenons un voyage pour créer un espace en ligne accueillant pour les amateurs de bêtes. Notre scénario, Pet Paradise, présente un personnage, Alex l'Innovateur, qui rêve de connecter les propriétaires d'animaux grâce à un site web dynamique et informatif. Le but d'Alex est de présenter les services pour animaux, de partager des histoires et de construire une communauté. Ce scénario est conçu pour être captivant et guider les étudiants dans le processus de transformation de la vision d'Alex en réalité numérique.

Nous commencerons par aborder les bases de HTML avec un petit projet, en mettant l'accent sur 3 laboratoires qui vous guideront dans le processus de création d'une page web simple.

header animation example

Dans ce Lab, vous créerez la section d'en-tête et la mise en page de la page d'accueil pour "Pet's House". Cette section est cruciale pour faire une bonne première impression. L'en-tête contiendra le menu de navigation, et la mise en page d'accueil présentera le site web aux visiteurs.

Ceci est un Guided Lab, qui fournit des instructions étape par étape pour vous aider à apprendre et à pratiquer. Suivez attentivement les instructions pour compléter chaque étape et acquérir une expérience pratique. Les données historiques montrent que c'est un laboratoire de niveau intermédiaire avec un taux de réussite de 66%. Il a reçu un taux d'avis positifs de 100% de la part des apprenants.

Structure du document HTML

Lorsque les utilisateurs parcourent le web via Internet, ils rencontrent diverses formes de contenu, notamment du texte, des liens, des graphiques, des images, etc.

Avez-vous déjà été curieux de savoir comment un navigateur affiche ce contenu de page? Nous pouvons appuyer sur F12 pour voir le code source de la page, comme le montre la figure ci-dessous.

D'après la figure ci-dessus, on peut voir que tout le contenu textuel est encadré par des chevrons < et >. Un tel contenu est appelé balises, où <> représente la balise d'ouverture et </> représente la balise de fermeture.

HTML est un langage composé d'éléments, représentés par des balises.

HTML (HyperText Markup Language) est le code utilisé pour structurer une page web et son contenu.

Hyper : "Hyper" est contraire à "Linéaire". Les programmes informatiques antérieurs étaient majoritairement linéaires, ce qui signifie qu'ils devaient être exécutés dans l'ordre, du haut en bas. Les pages web créées avec HTML, en revanche, permettent de naviguer via des liens hypertextes d'une page à l'autre.
Texte : Contrairement aux langages de programmation compilés tels que C, C++ ou Java, HTML est un langage de script basé sur le texte. Son code source est interprété et exécuté directement dans le navigateur sans la nécessité de compilation.
Markup : Le principe fondamental d'HTML est d'utiliser des balises (composées de chevrons appariés) pour décrire la manière dont le contenu d'une page web devrait être affiché dans un navigateur.
Langage : HTML est un langage, mais il est interprété plutôt que compilé. Toutes ses balises de mise en forme sont traduites par le navigateur dans le résultat final affiché.

Dans cette étape, vous commencerez par configurer la structure de base de votre page web. Vous créerez un nouveau fichier HTML nommé index.html dans le répertoire /home/labex/project en utilisant la commande touch ~/project/index.html. Ouvrez ce fichier avec votre éditeur de texte préféré et ajoutez la structure de base d'un document HTML :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!-- We'll add content here in the next steps -->
  </body>
</html>

La déclaration <!DOCTYPE html> indique au navigateur quel type de document attendre.
L'élément <html lang="en"> est l'élément racine du document HTML.
L'élément <head> contient des métadonnées (données sur le document), telles que le titre et l'ensemble des caractères.
L'élément <title> spécifie le titre de la page web.
L'élément <meta charset="UTF-8"> spécifie l'encodage des caractères pour la page web.
L'élément <body> contient le contenu visible de la page web.

Cliquez sur Go Live dans le coin inférieur droit de l'Environnement pour ouvrir le port 8080, puis cliquez sur Web 8080 dans le coin supérieur gauche de l'Environnement pour voir les résultats de la page.

Webpage preview in browser

Note : La page actuelle n'a pas d'effet car le corps est actuellement vide. Nous pourrons voir l'effet de la page lorsque nous apprendrons plus de balises.

Éléments sémantiques

La mise en page d'une page web est généralement composée de plusieurs parties clés, chacune ayant un but distinct pour s'assurer que l'interface utilisateur est à la fois propre et fonctionnelle :

En-tête : C'est la partie supérieure de la page web, qui contient souvent le logo du site, le menu de navigation, les liens de connexion/inscription, etc. L'en-tête est l'une des premières choses que remarque un utilisateur, donc il est généralement conçu pour être prominent et offrir un accès facile à la navigation.
Barre de navigation : Bien que la barre de navigation puisse faire partie de l'en-tête, dans certains designs, elle peut également être une section distincte située en haut, sur le côté ou en bas de la page. La barre de navigation offre un accès rapide aux liens internes du site web, aidant les utilisateurs à trouver facilement le contenu qui les intéresse.
Contenu principal : C'est la partie centrale de la page web, qui contient l'information ou le contenu principal que l'utilisateur est venu voir. Le contenu principal peut être divisé en plusieurs sections, telles que des articles, des billets de blog, des présentations de produits, etc., variant selon le but et la mise en page du site web.
Barre latérale : La barre latérale se situe généralement le long du contenu principal (soit à gauche, soit à droite) et fournit des informations ou des fonctionnalités supplémentaires, telles que des liens relatifs, des publicités, des boîtes de recherche, des liens de médias sociaux, etc.
Pied de page : Situé en bas de la page web, le pied de page contient généralement des informations sur le copyright, des détails de contact, des liens vers les cartes du site, des politiques de confidentialité, des icônes de médias sociaux, etc. Le pied de page est la dernière partie vue par les utilisateurs lorsqu'ils arrivent en bas de la page, offrant des informations de base sur le site et d'autres options de navigation.

Ajoutez des éléments sémantiques (header, main, footer) pour organiser le contenu logiquement.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Contenu de l'en-tête-->
    <header></header>
    <!--Contenu principal-->
    <main></main>
    <!--Contenu du pied de page-->
    <footer></footer>
  </body>
</html>

 est un commentaire en HTML qui est utilisé pour ajouter des notes ou des descriptions au code. Il n'affecte pas la fonctionnalité du code et est ignoré par le navigateur.
L'élément HTML <header> représente le contenu introductif, généralement un groupe d'éléments d'aide à l'introduction ou à la navigation.
L'élément HTML <main> représente le contenu dominant du <body> d'un document. La zone de contenu principal est composée de contenu directement lié ou qui développe le sujet central d'un document, ou la fonctionnalité centrale d'une application.
L'élément HTML <footer> représente un pied de page pour son ancêtre le plus proche de sectionnement de contenu ou d'élément racine de sectionnement. Un pied de page contient généralement des informations sur l'auteur de la section, des données de copyright ou des liens vers des documents connexes.

Section de l'en-tête

La section d'accueil devrait inclure les composants suivants :

Home section components layout

Ensuite, nous devons implémenter la mise en page de la section d'en-tête, qui contient l'image du logo et la navigation.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Contenu de l'en-tête-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Contenu principal-->
    <main></main>
    <!--Contenu du pied de page-->
    <footer></footer>
  </body>
</html>

Divisez le logo et la navigation en deux zones à l'aide des balises <div> et <nav>.
L'élément HTML <img> incorpore une image dans le document.
L'attribut src dans la balise <img> est utilisé pour spécifier le chemin vers l'image.
L'attribut alt dans la balise <img> est utilisé pour décrire l'image, et lorsque l'image ne peut pas être affichée correctement sur la page, le contenu de l'alt sera affiché.
class dans la balise est un attribut global, et le contenu après le signe égal est équivalent au nom donné à l'élément, qui est utilisé par le CSS pour identifier un élément particulier et définir le style pour l'élément spécifié.
L'élément HTML <ul> représente une liste non ordonnée d'éléments, généralement affichée sous forme d'une liste à puces.
L'élément HTML <li> représente un élément d'une liste.
L'élément HTML <a> est utilisé pour définir un lien hypertexte, créant un lien entre différentes pages.

Note : HTML est utilisé pour placer du contenu sur une page web, tandis que le CSS est essentiel pour créer une mise en page visuellement attrayante. Dans cette expérience, nous nous concentrons sur l'apprentissage du contenu HTML. Pour obtenir une meilleure conception de la page, je vous fournis également le fichier style.css complet.

Mise en page de la section d'accueil

Ensuite, complétez la mise en page de l'accueil, qui est composée de trois parties : titre, texte et image.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Pet's House</title>
  </head>
  <body>
    <!--Contenu de l'en-tête-->
    <header>
      <div class="logo-section">
        <img class="logo" src="images/logo.svg" alt="logo" />
      </div>
      <nav class="navigation-section">
        <ul class="navigation">
          <li>Home</li>
          <li>About Us</li>
          <li>Display</li>
          <li>Contact</li>
        </ul>
      </nav>
    </header>
    <!--Contenu principal-->
    <main>
      <div class="container">
        <section id="home" class="cover-sect">
          <div class="title-text">
            <h1>Welcome</h1>
            <p>~ This website offers personalised services for pets. ~</p>
          </div>
          <div class="box-feature">
            <img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
          </div>
        </section>
      </div>
    </main>
    <!--Contenu du pied de page-->
    <footer></footer>
  </body>
</html>

L'élément HTML <section> représente une section générique autonome d'un document.
L'élément HTML <h1> représente un titre pour le contenu dans un élément <section>.
L'élément HTML <p> représente un paragraphe.

Résumé

Dans ce laboratoire, vous avez appris à structurer et à styliser la mise en page de l'en-tête et de la page d'accueil, en mettant l'accent sur la création d'une interface accueillante et navigable pour "Pet's House". Ce laboratoire a souligné l'importance des premières impressions et a jeté les bases d'un site web convivial pour l'utilisateur.

Mise en page de l'en-tête et de l'accueil