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
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 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é.
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 :
<a href="url_de_votre_choix"> <img src="chemin_vers_votre_image.jpg" alt="Image"> </a> - 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
Assurez-vous de remplacer "chemin_vers_votre_fichier_audio.mp3" par le chemin de votre fichier audio. L'attribut "controls" ajouté à la balise<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> - 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."
<div> <h2>Bienvenue sur notre site</h2> <p>Découvrez notre contenu passionnant.</p> </div>
- Créer un lien hypertexte :