Balise de texte en HTML5
Balise de texte en HTML5
-
Objectifs
- Apprendre les techniques et propriétés fondamentales nécessaires pour composer du texte sur les pages HTML.
-
Description
- Pour formater le texte d’une page html, la méthode la plus simple consiste à attribuer à chaque paragraphe, à chaque ligne de texte ou à chaque mot une couleur, une taille, une police de caractère et un style particulier à l’aide de balises html spécifiques…
-
Liste
-
Application
- Créer un lien hypertexte :
- Créez un lien vers la page d’accueil de Google (https://www.google.com) avec le texte « Visitez Google pour effectuer des recherches en ligne ».
- Utilisez cette phrase: « Le ciel est particulièrement clair aujourd’hui. » Mettez le mot « clair » en gras.
- Texte en gras :
- Écrivez la phrase suivante : « Le mot ‘importance’ est en gras. »
- Utilisez cette phrase: « L’art de la narration est ancien. » Mettez le mot « narration » en italique.
- Mise en exergue d’un texte – italique :
- Utilisez la phrase « L’information suivante est mise en italique. »
- Créer une abréviation :
- Utilisez la phrase « L'<abbr title=’HyperText Markup Language’>HTML est un langage de balisage. »
- Utilisez l’abréviation « Dr. » pour « Docteur » et donnez-lui un attribut « title » pour expliquer ce que signifie l’abréviation: Dr. Ben HASSANA est un médecin renommé.
- Insérer une citation :
- Creéz la citation suivante à l’aide de la balise <blockquote> : « La connaissance parle, mais la sagesse écoute. » – Jimi Hendrix
- Incluez cette citation à l’aide de la balise <blockquote> : « Pour réussir, votre désir de réussite doit être plus grand que votre peur de l’échec. » Citez l’auteur comme « Bill Cosby ».
- Intégrer une image dans un lien :
- Pour créer un lien hypertexte autour d’une image, vous pouvez utiliser la balise <a> pour entourer la balise <img>. Assurez-vous de spécifier l’URL que vous souhaitez lier. Voici comment vous pouvez le faire :
- Intégrer un fichier audio :
- Incluez un fichier audio avec contrôles de lecture, en utilisant la phrase « Cliquez pour écouter la musique » comme le texte de remplacement.
- Pour inclure un fichier audio avec des contrôles de lecture et utiliser la phrase « Cliquez pour écouter la musique » comme texte de remplacement, vous pouvez utiliser la balise
- Utiliser la balise <div> :
- Créez une division <div> contenant un titre <h2> « Bienvenue sur notre site » et un paragraphe de texte : « Découvrez notre contenu passionnant. »
| Balise | Description |
| <!– … –> | Définit un commentaire |
| <!DOCTYPE> | Définit le type du document |
| <a> | Définit un lien |
| <abbr> | Définit une abréviation |
| <address> | Définit une adresse |
| <area> | Définit une zone à l’intérieur d’une image |
| <article> | Définit un article |
| <aside> | Définit une partie latérale au contenu |
| <audio> | Définit un fichier audio |
| <b> | Texte en gras |
| <base> | Définit une URL de base pour tous les liens de la page |
| <bdo> | Définit la direction du texte |
| <blockquote> | Définit une longue citation |
| <body> | Définit le corps de la page |
| <br> | Saut de ligne |
| <button> | Définit un bouton cliquable |
| <canvas> | Définit un graphique |
| <caption> | Légende du tableau |
| <cite> | Définit une citation |
| <code> | Mise en forme d’un texte en code informatique |
| <col> | Définit une colonne d’un tableau |
| <colgroup> | Définit un groupe de colonne pour un tableau |
| <command> | Définit un bouton de commande |
| <datalist> | Définit une liste d’options |
| <dd> | Définition d’un terme |
| <del> | Définit un texte supprimé |
| <details> | Définit les détails d’un élément |
| <dfn> | Définition |
| <div> | Définit un calque ou une section |
| <dl> | Liste de définition |
| <dt> | Définition d’un terme |
| <em> | Mise en exergue d’un texte – italique |
| <embed> | Définit un contenu extérieur (audio, vidéo …) |
| <fieldset> | Regroupe plusieurs éléments d’un formulaire |
| <figcaption> | Légende d’un groupe d’élément multimédia |
| <figure> | Définit un groupe d’élément multimédia |
| <footer> | Définit le bas d’un section ou d’une page |
| <form> | Définit un formulaire |
| <h1> to <h6> | Définit un titre par degré importance de 1 à 6 |
| <head> | Définit l’en-tête d’un document |
| <header> | Définit le haut d’une section ou d’une page |
| <hgroup> | Regroupe les informations du haut d’une page ou section |
| <hr> | Barre horizontale |
| <html> | Définit un document html |
| <i> | Texte en italique |
| <iframe> | Introduit un page html dans une frame |
| <img> | Définit une image |
| <input> | Définit un champ |
| <ins> | Définit un texte insérer |
| <keygen> | Générateur de clé pour un formulaire |
| <kbd> | Raccourcis ou touche du clavier |
| <label> | Légende d’un groupe d’élément de formulaire |
| <legend> | Titre d’un groupe d’élément d’un formulaire |
| <li> | Élément d’une liste |
| <link> | Définit les relations entre les documents |
| <map> | Définit une carte |
| <mark> | Mise en valeur d’un mot ou d’un texte – Texte marqué |
| <math> | Définit une formule mathématique |
| <menu> | Définit un menu en liste |
| <meta> | Définit des informations relatives au document |
| <meter> | Définit une unité de mesure |
| <nav> | Définit un groupe de liens de navigation |
| <noscript> | Définit une alternative au script non supporté |
| <object> | Définit un objet du contenu extérieur multimédia |
| <ol> | Définit une liste ordonné |
| <optgroup> | Regroupe d’une liste d »option dans un formulaire |
| <option> | Option d’une liste dans un formulaire |
| <output> | Définit un type de sortie |
| <param> | Définit les paramètres d’un objet |
| <pre> | Texte pré-formaté |
| <progress> | Définit une progression |
| <q> | Définit une courte citation |
| <rp> | Annotation ruby si le script n’est pas supporté |
| <rt> | Annotation ruby d’explication |
| <ruby> | Définit une annotation en ruby |
| <samp> | Définit un échantillon de code |
| <script> | Définit un script |
| <section> | Définit une section |
| <select> | Définit une liste sélectionnable |
| <small> | Minimise l’importance d’un texte |
| <source> | Définit la source d’un contenu multimédia |
| <span> | Définit une section de type inline |
| <strong> | Mise en exergue d’un texte – Texte en Gras |
| <style> | Définit un style CSS |
| <sub> | Mise en indice d’un texte |
| <summary> | Définit l’en-tête des détails d’un document ou section |
| <sup> | Mise en exposant d’un texte |
| <svg> | Définit une image vectorielle |
| <table> | Définit un tableau |
| <tbody> | Définit le corps d’un tableau |
| <td> | Définit une cellule d’un tableau |
| <textarea> | Définit une zone de texte |
| <tfoot> | Définit le bas d’un tableau |
| <th> | Définit une cellule d’en-tête d’un tableau |
| <thead> | Définit le haut d’un tableau |
| <time> | Définit une unité de temps |
| <title> | Définit le titre d’un document |
| <tr> | Définit une ligne de tableau |
| <track> | Définit une unité de temps pour les éléments <audio> et <video>. |
| <ul> | Définit une liste non-ordonné |
| <var> | Définit une variable |
| <video> | Définit une vidéo |
| <wbr> | Définit un possible retour à la ligne |
Dr. Ben HASSANA est un médecin renommé.
<a href="url_de_votre_choix">
<img src="chemin_vers_votre_image.jpg" alt="Image">
</a>
<audio controls>
<source src="chemin_vers_votre_fichier_audio.mp3" type="audio/mpeg">
Votre navigateur ne prend pas en charge l'élément audio.
</audio>
Assurez-vous de remplacer « chemin_vers_votre_fichier_audio.mp3 » par le chemin de votre fichier audio. L’attribut « controls » ajouté à la balise
<div>
<h2>Bienvenue sur notre site</h2>
<p>Découvrez notre contenu passionnant.</p>
</div>