Introduction
Ce laboratoire vous guidera dans la création d'un formulaire de contact et de la section de pied de page, qui sont essentiels pour l'interaction et la fourniture d'informations supplémentaires.
Layout du formulaire de contact
La section "Contactez-nous" est composée de deux parties : le paragraphe de texte et le contenu du formulaire. Plusieurs types d'éléments de formulaire sont disponibles en HTML, tels que les formulaires de zone de texte, les formulaires à choix multiples, les formulaires de bouton de soumission, etc.
<!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>Accueil</li>
<li>A propos de nous</li>
<li>Affichage</li>
<li>Contact</li>
</ul>
</nav>
</header>
<!--Contenu principal-->
<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>A 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 friction, 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 tracas.
</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="Services d'escorte d'animaux de compagnie"
/>
<figcaption>
Fournir des services d'accueil d'animaux de compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-2.png"
alt="Services de contrôle de santé des animaux de compagnie"
/>
<figcaption>
Fournir des services de contrôle de santé des animaux de
compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-3.png"
alt="Services de bain d'animaux de compagnie"
/>
<figcaption>
Fournir des services de bain d'animaux de compagnie.
</figcaption>
</figure>
</div>
</div>
</section>
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contactez-nous</h2>
<p>
Bienvenue sur notre site web pour animaux de compagnie! Nous
sommes ravis de vous avoir parmi nous et impatients de vous
partager la gamme de services que nous offrons pour vous et vos
adorés compagnons à quatre pattes. Que vous cherchiez des soins,
un hébergement, de la formation ou tout autre service lié aux
animaux, nous vous avons couverts. Notre équipe est passionnée par
les animaux et déterminée à offrir les soins les meilleurs
possibles. Si vous êtes intéressé(e) à en savoir plus sur nos
services ou si vous envisagez de rejoindre notre communauté, nous
vous encourageons à remplir notre formulaire. Cela nous permettra
de mieux comprendre vos besoins et d'offrir des solutions
personnalisées pour vous et votre animal de compagnie. Bienvenue à
bord, et nous avons hâte de vous servir!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Nom <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Courriel <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demande de services<br />
<select name="message" id="message" class="txt-box">
<option value="">
Nourrir les animaux de compagnie à la maison
</option>
<option value="">
Service de jeu avec les animaux de compagnie
</option>
<option value="">
Service de bain pour les animaux de compagnie
</option>
<option value="">Rejoignez-nous</option>
</select>
<br /> </label
><br />
<input
class="btn"
id="submit"
type="submit"
value="Soumettre"
/>
</form>
</div>
</div>
</section>
</div>
</main>
<!--Contenu du pied de page-->
<footer></footer>
</body>
</html>
- L'élément HTML
<form>représente une section de document contenant des contrôles interactifs pour soumettre des informations. - L'élément HTML
<label>représente une légende pour un élément dans une interface utilisateur. Pour associer explicitement un élément<label>à un élément<input>, vous devez d'abord ajouter l'attributidà l'élément<input>. Ensuite, vous ajoutez l'attributforà l'élément<label>, où la valeur deforest la même que l'iddans l'élément<input>. - L'élément HTML
<input>est utilisé pour créer des contrôles interactifs pour les formulaires web afin d'accepter des données de l'utilisateur ; une large variété de types de données d'entrée et de widgets de contrôle sont disponibles, selon l'appareil et l'agent utilisateur. - L'élément HTML
<select>représente un contrôle qui fournit un menu d'options. - Chaque élément
<option>devrait avoir un attributvaluecontenant la valeur de données à soumettre au serveur lorsque cette option est sélectionnée. Si aucun attributvaluen'est inclus, la valeur par défaut est le texte contenu à l'intérieur de l'élément. - L'attribut
typevous permet de spécifier différents types d'éléments d'entrée.type="text"signifie qu'il s'agit d'un champ d'entrée de texte.type="email"signifie qu'il s'agit d'un champ d'entrée d'adresse e-mail.type="submit"signifie qu'il s'agit d'un élément de formulaire avec un bouton de soumission.
Cliquez sur Démarrer 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 prévisualiser les résultats de la page.
Élément ancre
Ensuite, nous voulons que, en cliquant sur "Accueil", "A propos de nous", "Affichage" et "Contact" dans la barre de navigation de l'en-tête, nous puissions sauter vers la zone de contenu correspondante.
Ajout de la balise a à un élément de liste ul dans la navigation :
<nav class="navigation-section">
<ul class="navigation">
<li><a class="nav-link" href="#home">Accueil</a></li>
<li><a class="nav-link" href="#about">A propos de nous</a></li>
<li><a class="nav-link" href="#display">Affichage</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
L'élément HTML
<a>(ou élément ancre), avec son attribut href, crée un lien hypertexte vers des pages web, des fichiers, des adresses e-mail, des emplacements dans la même page ou tout autre chose que peut adresser une URL.Le contenu de chaque
<a>devrait indiquer la destination du lien. Si l'attribut href est présent, appuyer sur la touche Entrée tandis que le focus est sur l'élément<a>l'activera. Ici, nous ajoutons le nom de l'attributiddu layout correspondant à l'intérieur de l'attribut href.
Layout du pied de page
Enfin, le contenu de la section du pied de page est mis en œuvre.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
</head>
<body>
<!--section 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><a class="nav-link" href="#home">Accueil</a></li>
<li><a class="nav-link" href="#about">A propos de nous</a></li>
<li><a class="nav-link" href="#display">Affichage</a></li>
<li><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!--section principale-->
<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>A 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 friction, 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 tracas.
</p>
</div>
<div class="box-feature circle">
<img src="images/intro.png" />
</div>
</section>
<!--section d'affichage-->
<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="Services d'escorte d'animaux de compagnie"
/>
<figcaption>
Fournir des services d'accueil d'animaux de compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-2.png"
alt="Services de contrôle de santé des animaux de compagnie"
/>
<figcaption>
Fournir des services de contrôle de santé des animaux de
compagnie.
</figcaption>
</figure>
</div>
<div class="service">
<figure>
<img
src="images/service-3.png"
alt="Services de bain d'animaux de compagnie"
/>
<figcaption>
Fournir des services de bain d'animaux de compagnie.
</figcaption>
</figure>
</div>
</div>
</section>
<!--section de contact-->
<section id="contact" class="contact-section">
<div class="section-text">
<h2>Contactez-nous</h2>
<p>
Bienvenue sur notre site web pour animaux de compagnie! Nous
sommes ravis de vous avoir parmi nous et impatients de vous
partager la gamme de services que nous offrons pour vous et vos
adorés compagnons à quatre pattes. Que vous cherchiez des soins,
un hébergement, de la formation ou tout autre service lié aux
animaux, nous vous avons couverts. Notre équipe est passionnée par
les animaux et déterminée à offrir les soins les meilleurs
possibles. Si vous êtes intéressé(e) à en savoir plus sur nos
services ou si vous envisagez de rejoindre notre communauté, nous
vous encourageons à remplir notre formulaire. Cela nous permettra
de mieux comprendre vos besoins et d'offrir des solutions
personnalisées pour vous et votre animal de compagnie. Bienvenue à
bord, et nous avons hâte de vous servir!
</p>
</div>
<div class="contact-info">
<div class="form-box">
<form id="form" class="contact-form">
<label for="name" class="form-content"
>Nom <br />
<input
name="name"
id="name"
type="text"
class="txt-box"
required
/><br />
</label>
<label for="email" class="form-content"
>Courriel <br />
<input
name="email"
id="email"
type="email"
class="txt-box"
required
/><br />
</label>
<label for="message" class="form-content"
>Demande de services<br />
<select name="message" id="message" class="txt-box">
<option value="">
Nourrir les animaux de compagnie à la maison
</option>
<option value="">
Service de jeu avec les animaux de compagnie
</option>
<option value="">
Service de bain pour les animaux de compagnie
</option>
<option value="">Rejoignez-nous</option>
</select>
<br /> </label
><br />
<input
class="btn"
id="submit"
type="submit"
value="Soumettre"
/>
</form>
</div>
</div>
</section>
</div>
</main>
<footer>
<span class="contact-us">Contactez-nous</span>
<span class="company-info">Créé par Lotus</span>
<span>@Copyright 2024</span>
</footer>
</body>
</html>
- L'élément HTML
<span>est un conteneur générique en ligne pour le contenu de mise en forme, qui ne représente pas intrinsèquement rien. Il peut être utilisé pour regrouper des éléments à des fins de mise en forme (en utilisant les attributs class ou id), ou parce qu'ils partagent des valeurs d'attributs, comme lang. Il ne devrait être utilisé que lorsque aucun autre élément sémantique n'est approprié.<span>est très similaire à un élément<div>, mais<div>est un élément de niveau bloc tandis qu'un<span>est un élément de niveau en ligne.
élément de niveau en ligne:
élément de niveau bloc:
L'élément de lien vers une ressource externe
L'élément HTML <link> spécifie les relations entre le document actuel et une ressource externe. Cet élément est le plus souvent utilisé pour lier des feuilles de style, mais est également utilisé pour établir des icônes de site (à la fois les icônes du type "favicon" et les icônes pour l'écran d'accueil et les applications sur les appareils mobiles), entre autres choses.
Nous utilisons une variété d'éléments HTML pour avoir le contenu de la page complété. Si vous voulez obtenir l'effet de l'image, nous devons utiliser le CSS. Ici, préparons un fichier CSS complet (style.css), et nous utilisons l'élément de lien pour l'ajouter.
<head>
<meta charset="UTF-8" />
<title>Pet's House</title>
<link rel="stylesheet" href="./style.css" />
</head>
Cliquez sur Démarrer 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.
Résumé
Dans ce laboratoire, vous avez terminé le site web en ajoutant un formulaire de contact et un pied de page, tout en apprenant sur l'interaction utilisateur et l'accessibilité de l'information. Ce laboratoire a renforcé l'importance des canaux de communication et d'une conception cohérente dans le développement web, mettant ainsi fin à la structure du site.
Félicitations pour votre introduction à HTML. Si vous voulez savoir comment styliser vos pages, apprenez le laboratoire sur le CSS!
