Introduction
Dans ce laboratoire, concentrez-vous sur la principale zone de contenu de votre site web. Cette section présente les services de "Pet's House".
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 débutant avec un taux de réussite de 93%. Il a reçu un taux d'avis positifs de 98% de la part des apprenants.
Mise en page de la section À propos de nous
La section À propos de nous peut être divisée en deux parties, la partie image et la partie contenu textuel. Utilisez la balise <img> pour ajouter l'image, la balise <h2> pour ajouter le titre et la balise <p> pour ajouter le paragraphe de texte.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Accueil</li>
<li>À propos de nous</li>
<li>Affichage</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Bienvenue</h1>
<p>
~ Ce site web propose des services personnalisés pour les animaux
de compagnie. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>À propos de nous</h2>
<p>
Nous cherchons à créer une communauté d'animaux de compagnie
heureux et de propriétaires d'animaux de compagnie encore plus
heureux. <br /><br />
Notre équipe d'assistance client exceptionnelle est dédiée à vous
offrir une expérience de shopping sans tracas, en vous offrant un
soutien expert du moment où vous naviguez jusqu'à la livraison et
au-delà. <br /><br />Nous comprenons l'importance d'un service
rapide et fiable, c'est pourquoi nous offrons des options
d'expédition accélérée et des retours sans difficultés.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
- L'attribut global
iddéfinit un identifiant (ID) qui doit être unique dans tout le document. Il est similaire àclassdans le sens où c'est comme un nom pour l'élément, mais la différence est que l'id est unique, et l'attribut id a également la capacité de définir des signets, que nous utiliserons plus tard dans l'expérience. - Les éléments HTML
<h1>à<h6>représentent six niveaux de titres de section. - L'élément HTML
<br>produit un retour à la ligne dans le texte (retour chariot). Il est utile pour écrire un poème ou une adresse, où la division des lignes est importante.
Mise en page de l'affichage
Sur la page d'affichage, qui est composée principalement d'images et de texte, nous pouvons diviser cette page en trois sections, chacune composée d'images et de texte.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--Header Content-->
<header>
<div class="logo-section">
<img class="logo" src="images/logo.svg" alt="logo" />
</div>
<nav class="navigation-section">
<ul class="navigation">
<li>Accueil</li>
<li>À propos de nous</li>
<li>Affichage</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Main Content-->
<main>
<div class="container">
<section id="home" class="cover-sect">
<div class="title-text">
<h1>Bienvenue</h1>
<p>
~ Ce site web propose des services personnalisés pour les animaux
de compagnie. ~
</p>
</div>
<div class="box-feature">
<img class="cover-image" src="images/cat.jpeg" alt="just a cat" />
</div>
</section>
<section id="about" class="story-sect">
<div class="section-text">
<h2>À propos de nous</h2>
<p>
Nous cherchons à créer une communauté d'animaux de compagnie
heureux et de propriétaires d'animaux de compagnie encore plus
heureux. <br /><br />
Notre équipe d'assistance client exceptionnelle est dédiée à vous
offrir une expérience de shopping sans tracas, en vous offrant un
soutien expert du moment où vous naviguez jusqu'à la livraison et
au-delà. <br /><br />Nous comprenons l'importance d'un service
rapide et fiable, c'est pourquoi nous offrons des options
d'expédition accélérée et des retours sans difficultés.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<section id="display" class="samples">
<div class="section-text">
<h2>Affichage</h2>
</div>
<div class="services">
<div class="service">
<figure>
<img src="images/service-1.png" alt="Dog walking services" />
<figcaption>
Fournir des services d'accueil d'animaux de compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-2.png" alt="Pet check-up services" />
<figcaption>
Fournir des services de contrôle santé des animaux de
compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img src="images/service-3.png" alt="Pet washing services" />
<figcaption>
Fournir des services de bain pour les animaux de compagnie.
</figcaption>
</figure>
</div>
</div>
</section>
</div>
</main>
<!--Footer Content-->
<footer></footer>
</body>
</html>
- L'élément HTML
<figure>représente un contenu autonome, potentiellement avec une légende optionnelle, qui est spécifiée à l'aide de l'élément<figcaption>. La figure, sa légende et son contenu sont référencés comme une seule unité.
Résumé
Ce laboratoire vous a guidé dans le développement de la principale section du site web, où vous avez présenté les services de "Pet's House". Cette étape était cruciale pour détailler ce que le site web propose, en améliorant la valeur du site pour les visiteurs grâce à un contenu structuré et à l'esthétique.
