Dans les activités précédentes, vous avez appris:
- Principes de base des balises et des éléments HTML
- Comment structurer une page Web
- HTML sémantique et bonnes pratiques
Avec cet article, vous poursuivez vos connaissances en HTML et aborderez d'autres éléments HTML.
Éléments de contenu textuel
<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>
Ces éléments facilitent la création de contenu textuel et ajoutent de la structure, du style et du sens. Plusieurs éléments textuels peuvent intégrer les éléments suivants.
L'élément de citation
<blockquote cite="https://www.goodreads.com/quotes">
<p>Be the change that you wish to see in the world.</p>
</blockquote>
Cet exemple montre comment utiliser l'élément <blockquote>, qui met en avant une célèbre citation du Mahatma Gandhi. Il existe de nombreuses citations intéressantes qui donnent un contenu et un sens mémorables. Pensez à certaines de vos personnalités inspirantes préférées et à leurs citations.
Utilisez l'élément <blockquote> lorsque vous utilisez des guillemets et référencez des informations à partir d'une source. L'élément <blockquote> crée un retrait et un alignement uniques dans la présentation, et utilise à la fois une balise d'ouverture et de fermeture. <blockquote> est particulièrement utile lorsque vous utilisez des guillemets plus longs qui couvrent plusieurs lignes de texte.
Vous pouvez également utiliser divers éléments dans un élément <blockquote>, tels qu'un en-tête, un paragraphe ou une liste.
L'élément <details>
<details>
<summary>Details</summary>
Additional Information
</details>
Une page Web comporte souvent une section FAQ et des informations supplémentaires mises à la disposition de l'utilisateur. Certaines sections de questions fréquentes sont fréquemment utilisées pour les informations sur les produits, les itinéraires de voyage ou tout type de question/réponse.
L'élément <details> est utile car il utilise un widget divulgué qui contient des informations supplémentaires. L'élément comprend une fonctionnalité d'activation/désactivation intégrée, que l'utilisateur peut ouvrir et fermer. Lorsque le bouton est ouvert, le contenu des informations supplémentaires se développe et peut être lu par l'utilisateur. Lorsque le bouton est fermé, les informations supplémentaires sont masquées pour l'utilisateur. Pour nommer le widget <details> lui-même, utilisez l'élément <summary>.
<figure>
<img
src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
alt="Google logo">
<figcaption>Google logo</figcaption>
</figure>
Voici l'élément <figure> en action. Ici, <figure>, utilisé avec l'élément <figcaption>, peut être utilisé pour améliorer l'expérience visuelle.
Vous voyez des images partout sur le Web et d'autres données visuelles utiles tout le temps. Les éléments visuels permettent d'attirer l'attention du visiteur et de créer une expérience utilisateur exceptionnelle. L'élément <figure> est un moyen d'étiqueter une image, un tableau, un graphique, etc. Il permet de créer du contenu autonome en lien avec le contenu principal.
L'élément <time>
<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>
L'élément <time> indique à la fois le sens et le sens sémantique, ce qui permet d'améliorer les fonctionnalités des activités telles que la planification d'un rendez-vous en ligne, la publication de la date et de l'heure d'un article de blog, d'archives, etc. L'élément <time> est utilisé par exemple dans Google Agenda, en publiant un article en ligne sur une plate-forme ou en lisant les archives historiques en ligne sur le site Web d'une bibliothèque.
L'élément <time> fait référence à l'heure et peut représenter l'heure d'une horloge de 24 heures ou une date spécifique pouvant s'ajuster au fuseau horaire et au lieu. Cet élément nécessite à la fois une balise d'ouverture et de fermeture, <time> et </time>. Vous pouvez ajouter l'attribut datetime pour que les dates puissent être lues dans un format lisible par un ordinateur.
Métadonnées du document
<title>Sarah's Favorite Food Recipes</title>
Chaque fois que vous saisissez l'URL d'un site Web, le nom <title> est visible dans la barre du navigateur ou dans l'onglet de la page Web. C'est le titre que vous voyez donné à une page Web. Cet élément est important et est utilisé par un moteur de recherche pour afficher une liste de pages Web connexes dans les résultats de recherche. La longueur du titre peut varier : court et descriptif, ou plus long et plus descriptif.
Scénario: vous pensez à une page Web, mais vous ne vous souvenez plus de son URL. Saisissez les mots clés dans un moteur de recherche. Le moteur de recherche permet de retrouver la page Web que vous recherchez, et vous pouvez voir le nom <title> qui apparaît dans la recherche.
Éléments de contenu intégré
En plus du contenu textuel, vous pouvez utiliser de nombreux autres éléments de contenu.
L'élément <iframe>
<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>
Lorsque vous achetez des articles en ligne et que vous cliquez sur une option de paiement (Paypal ou Apple Pay, par exemple), ces fonctionnalités sont généralement ajoutées à une page Web associée à un <iframe>. Voir une carte en ligne pour rechercher un établissement local est une autre expérience courante. Ces types d'expériences utilisateur sur une page Web peuvent être ajoutés avec un iFrame. Dans l'exemple ci-dessus, l'URL Wikipédia s'affiche dans un iFrame, intitulé "Wikipédia".
L'élément <iframe> vous permet d'insérer du contenu provenant d'une autre source et d'intégrer un cadre dans une page Web. Elle crée un cadre rectangulaire et affiche le contenu dans le navigateur. Un cadre permet de présenter une mise en page en forme de fenêtre dans un élément <iframe>. Il s'agit d'un moyen efficace d'ajouter du contenu à votre page Web pour améliorer l'expérience utilisateur.
Éléments du formulaire
<progress max="100" value="30"> 30% </progress>
Lorsque vous regardez une vidéo plus longue, que vous faites une conférence ou que vous remplissez une demande de participation, une barre de progression visuelle peut s'avérer utile pour suivre votre progression. L'élément <progress> est utile dans ces types de scénarios.
Cet élément est représenté sous la forme d'une barre visuelle avec une couleur d'arrière-plan. La taille et la couleur d'arrière-plan de la barre visuelle peuvent varier. Avec la barre de progression, vous pouvez éventuellement utiliser les attributs max et value. L'attribut max définit le nombre à virgule flottante et l'attribut value indique la progression d'une tâche.
Script
<canvas id="canvas"></canvas>
Pour pouvoir dessiner des graphiques et des animations en temps réel, utilisez l'élément <canvas>. Placez l'élément <canvas> dans votre page Web HTML pour créer un canevas. Cet élément nécessite du code JavaScript pour permettre de dessiner et de créer des graphiques.
Éléments du tableau
<table>
<thead>
<tr>
<th colspan="2">Grocery List</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broccoli</td>
<td>Quantity: 2</td>
</tr>
</tbody>
</table>
L'élément <table>
L'élément <table> crée un tableau. Il s'agit du point de départ pour ajouter des éléments supplémentaires avec des lignes et des colonnes. Les tableaux apparaissent souvent sur les pages Web et constituent un moyen utile d'organiser et d'afficher des informations. L'un des cas d'utilisation de l'élément <table> consiste à présenter des informations tabulaires à l'utilisateur, comme le type d'informations que vous pouvez trouver dans une feuille de calcul.
L'élément <th>
L'élément <th> est l'en-tête d'un groupe de cellules.
L'élément <tr>
L'élément <tr> définit une ligne de cellules dans un tableau. À partir de là, vous pouvez ajouter des données de cellule spécifiques.
L'élément <td>
L'élément <td> crée la cellule et ajoute le contenu nécessaire.
Conclusion
Dans cet article, vous avez découvert d'autres éléments HTML et vous avez développé vos compétences en codage. Vous en avez appris davantage sur le contenu, le texte intégré, le contenu intégré et les éléments de tableau. Vous maîtrisez désormais les autres éléments HTML. Ne vous arrêtez pas en si bon chemin !