texte - Cours

Rappelons que le rôle des balises html est sémantique, ce sera avec le css que l'on mettra en forme.

Pour les balises présentées ci-dessous, les navigateurs proposent une mise en forme par défaut. Attention, à ne pas confondre le rôle de la balise avec cette mise en forme par défaut.

Par exemple, plus bas, on verra que la balise ins a pour effet par défaut de souligner. Il ne faut pas en conclure que cette balise sert à souligner. On peut modifier avec le langage css l'affichage (par exemple décider que le texte dans une balise ins sera rouge et non souligné). Le soulignement d'un texte est de la mise en forme : cela sera fait avec le langage css.

Les balises existantes ne sont pas toutes citées ici, mais les plus importantes sont là.

Surlignage

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Surligne  </title>
         
    </head>
    <body>
          
          <p> Je <mark> surligne </mark>. </p>
          
    </body>
</html>

Le rôle de cette balise est de suligner. Mais attention surligner est à comprendre du point de vue sémantique : il s'agit de mettre en évidence un texte. On pourra décider d'écrire en gras, vert et en police un peu plus grande le texte entouré de cette balise : c'est une autre mise en forme du surlignage.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Surligne  </title>
        <style>
        mark{
            font-weight: bold; 
            color: green;
            background-color: transparent;
            font-size: 1.1em;
        }
        </style>
    </head>
    <body>
          
          <p> Je <mark> surligne </mark>. </p>
          
    </body>
</html>

Il est d'ailleurs évident que le style css est nécessaire même avec un effet classique de surligneur : il faut pouvoir utiliser des surligneurs de diverses couleurs.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>  Surligne  </title>
        <style>
        mark{
            font-weight: bold; 
            
        }
        mark.orange{
            background-color:  #ff8c00;
        }
        mark.jaune{
            background-color: rgb(255,255,0);
        }
        mark.vert{
            background-color: rgb(0,255,0);
        }
        mark.bleu{
            background-color: #87cefa;
        }
        </style>
    </head>
    <body>
          <p>
          <mark class="orange"> surligneur orange </mark>
          </p>
          
          <p>
          <mark class="jaune"> surligneur jaune </mark>
          </p>
          
          <p>
          <mark class="vert"> surligneur vert </mark>
          </p>
          
          <p>
          <mark class="bleu"> surligneur bleu </mark>
          </p>
          
          
    </body>
</html>

Sens de lecture

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Palindrome  </title>
         
    </head>
    <body>
          
          <p> Right To Left : 
           
           
          <bdo dir="rtl">.karI ne alla eniraK</bdo></p>
    </body>
</html>

Préformaté

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> ascii art  </title>
         
    </head>
    <body>
<pre style="font-family:monospace;">
           \\\||||||////
            \\  ~ ~  //
             (  @ @  )
    ______ oOOo-(_)-oOOo___________
    .......
    .......
    .......
    _____________Oooo._____________
       .oooO     (   )
        (   )     ) /
         \ (     (_/
          \_)

</pre>

<p> Essayez en effaçant les balises... </p>
           
    </body>
</html>

Cette balise est très utile pour écrire le code d'un algorithme dans un langage de programmation telle que Python pour lequel l'indentation fait partie du code.

Barrer

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Effacer avec trace  </title>
         
    </head>
    <body>
          
           <p>  <del datetime="1994">La conjecture</del> Le théorème de Fermat : 
           pour un entier n ≥ 3, il n'existe pas de triplet d'entiers (x,y,z) 
           tel que x<sup>n</sup> + y<sup>n</sup>  =  z<sup>n</sup>. </p>
    </body>
</html>

On barre en précisant éventuellement avec l'attribut datetime la date à laquelle on a barré (où à laquelle on a eu des raisons de modifier l'information). La conjecture de Fermat (qui date du 17 ème siècle) a été démontrée par Andrew Wiles, mathématicien anglais, en 1994 et est donc devenue un théorème. Plus de 300 ans de recherche par de nombreux mathématiciens, voilà qui devrait donner à réfléchir à tous ceux qui abandonnent la recherche des exercices -- pourtant toujours faciles -- donnés par leur prof de maths.

Insérer

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Insérer  </title>
         
    </head>
    <body>
          
           <p>  Firefox supporte les formats d'image PNG, GIF, JPEG   <ins datetime="2010-03-04"> et SVG</ins>. </p>
    </body>
</html>

On balise ainsi la modification d'une information, en option la date avec datetime.

Passer à la ligne

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Passer à la ligne  </title>
         
    </head>
    <body>
          
           <p>   bla bla bla <br> blu blu  </p>
    </body>
</html>

Séparation horizontale

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Séparation horizontale   </title>
         
    </head>
    <body>
          
           <p>    L'horizontal rule par défaut </p> 
           <hr> 
            
           <p> Et un horizontal rule avec style ... </p>
           <hr style="border-width:3px;margin-right:20%;border-color:red;" >
           
           <p> Fin. </p>
    </body>
</html>

Indice, exposant

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Indice, exposant   </title>
         
    </head>
    <body>
          
            
            
            
           <p> Soit u<sub>n</sub> = 2<sup>2n</sup>.  
           
           <br> En particulier :  u<sub>3</sub> =  2<sup>6</sup>, soit u<sub>3</sub> = 64. </p>
           
           <p> Identité remarquable  : a<sup>2</sup> + b<sup>2</sup> +2ab = (a+b)<sup>2</sup>. </p>
    </body>
</html>

code, samp

Un exemple :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> code, samp   </title>
         
    </head>
    <body>
          
            
            <p> Le code javascript </p>
            
            <pre>
            <code>
            document.write("Ceci est du code JS.");
            </code>
            </pre>
            
           <p> affichera dans la page html :</p>
            
            <samp> Ceci est du code JS. </samp>
           
            
    </body>
</html>

On utilise code pour encadrer du code (de tout langage informatique : html, css, javascript, python, java, perl ...), on peut encadrer les balises code par des balises pre afin de respecter le formatage de ce code.



 On utilise samp pour le résultat (sortie produite par le code).


 
 
 
 
 
 
 
 
 

 	

 keyboard 

  Pour symboliser une touche du clavier : 




<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> kbd   </title>
        <style>
        kbd{
        padding:        0px 2px 0px 2px;
        border-width:   1px 2px 2px 1px;
        border-style:   solid;
        border-color:   #edd #baa #baa #eed;
        background:     #faf6f6;
        color:          #000000; }
        </style>
         
    </head>
    <body>
          
            
            Appuyez sur  <kbd>F1</kbd>.
           
            
    </body>
</html>


 
 Le style css permet de simuler l'image d'une touche. Pour visualiser le style par défaut du navigateur pour cette balise, supprimer toute la balise (et son contenu) de style. 
 
 

 
 
 
 
 
 
 
 
 


 	

 var 

 Dans un texte mathématique ou informatique, la balise var délimitera une variable. 




<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> var   </title>
        <style>
        var{
            font-style: italic;
          }
        </style>
         
    </head>
    <body>
          
            
            Déterminer <var>x</var> et <var>y</var> sachant que 
            <ul>
                <li>leur somme est égale à 8, </li>
                <li> leur produit est égal à 12.</li>
            </ul>
            
    </body>
</html>


 
 
 
 

 
 
 
 






 	

 Abréviation 

 


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Abréviation   </title>
        
         
    </head>
    <body>
          
            
             <p> Les langages <abbr title="HyperText Markup Language"> HTML </abbr> et <abbr title="Cascading Style Sheet">CSS</abbr> sont indispensables pour les pages web.</p>
             
             <p> Les formats d'images <abbr title="Portable Network Graphics"> PNG </abbr>, 
             <abbr title="Joint Photographic Experts Group">JPEG</abbr>,
             <abbr title="Scalable Vector Graphics"> SVG </abbr>, et 
             <abbr title="Graphics Interchange Format"> GIF </abbr>
             sont des formats d'images reconnus par tout navigateur.
             </p>
            
    </body>
</html>


 
  

 
 
 
 
 
 	

 Citation 

 


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Citation   </title>
    </head>
    <body>
          
            
             <p> la balise <code> blockquote </code> encadre une partie de la page qui est un extrait d'une autre source.</p>
             
             <blockquote cite="https://fr.wikipedia.org/wiki/Hypertext_Markup_Language">
             L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte, d’où son nom. HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des programmes informatiques. Il permet de créer des documents interopérables avec des équipements très variés de manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). HTML est initialement dérivé du Standard Generalized Markup Language (SGML).
             </blockquote>
             
             <p> La source peut être référencée avec la balise <code> cite</code> comme on le voit ci-dessus. </p>
             
             <p> La balise <code> q </code> est utilisée pour ces citations courtes : <q> Pourquoi en France utilise-t-on des claviers azerty plutôt que qwerty ? Parce qu'un clavier azerty en vaut deux.</q></p>
             
             <p> La balise <code> cite</code> est, elle, utilisée pour le titre d'une oeuvre : </p>
             <p> <cite>Le Seigneur des Anneaux</cite> est un livre de Tolkien.</p>
            
    </body>
</html>


 
  

 
 
 
 
 
 
 
 
 
 
 
 	

 Important 

 


<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title> Important  </title>
    </head>
    <body>
          
            
             <p> Plusieurs balises servent à mettre en relief une partie de texte.</p>
             
             <p> La balise <code>strong</code> confère au texte qu'elle entoure une forte importance : la balise <strong>strong</strong> est importante. </p>
             
             <p> La balise <code>em </code> délimite une emphase :  <em>J'adore</em> coder en html. </p>
             
             <p> On peut également marquer du texte avec <code> mark </code> : vous devez <mark>connaître</mark> le langage html.</p>  
            
    </body>
</html>