Maison >interface Web >tutoriel HTML >Balise de code HTML

Balise de code HTML

PHPzoriginal: 2024-09-04 16:28:53842parcourir

HTML ou Hyper Text Markup Language est un langage de programmation de développement Web qui utilise des balises pour définir, déclarer et effectuer des opérations sur n'importe quel élément de page Web. Les balises sont définies à l'aide des symboles < et >, et une balise de fermeture doit être précédée d'un « / ». Une balise de code est un type de balise qui permet au programmeur d'écrire son morceau de code entre les deux, comme ……. , car chaque balise HTML doit avoir une balise de fermeture.

Syntaxe avec explication :

La syntaxe de base est présentée ci-dessous, où l'élément est livré avec une paire et les fragments de code sont écrits entre ces balises. L'omission de balise n'est pas effectuée ici car la balise de début et de fermeture est obligatoire par défaut.

<pre class="brush:php;toolbar:false">
<code>
….
….
</code>

Comment fonctionne la balise de code en HTML ?

Par défaut, le contenu du La police de la balise est affichée en monospace, ce qui signifie que tous les caractères d'un contenu donné ont la même largeur. Il est spécifié dans les normes HTML 5 et HTML4.




HTML utilise différentes tailles de texte et davantage de propriétés avec les polices et le retrait. Il existe un scénario dans lequel il est nécessaire d'afficher du contenu dans le navigateur avec à la fois du texte et du code d'extraits, puis nous utiliserons ce  étiqueter. La balise code est associée à la balise préformatée 
, qui préserve le format exact du texte écrit dans le document source.</p>
<p>Pour commencer le texte exactement sur la même ligne, cette balise a été utilisée, ce qui supprime littéralement l'espace blanc. Pour représenter le code dans un style de police, il est préférable d'utiliser un sélecteur de code dans le style CSS et de donner un poids visuel. Pour choisir une police, il est préférable d'avoir du CSS avec une famille de polices déjà définie sur monospace. En ce qui concerne la compatibilité des navigateurs, il est pris en charge dans Chrome, Edge, Opera, Safari, Firefox. Même cet élément prend en charge à la fois les attributs d'événement et globaux. Les balises de code utilisent l'attribut de classe pour un langage prédéfini ainsi que <id>, <style>, <title>.</p>
<p>Cette balise de code utilise certains éléments lors de la mise en œuvre.</p>
<ul>
<li>
<strong><Code> :</strong> Définit un fragment de code</li>
<li>
<strong><var> :</strong> Explique les variables</li>
<li>
<strong><samp></strong> : lance une sortie informatique</li>
<li>
<strong><kbd></strong> : Aide à afficher la saisie au clavier</li>
</ul>
<h3>Exemples d'implémentation de balise de code HTML</h3>
<p>Voici un exemple avec différents styles sur la balise code.</p>
<h4>Exemple n°1</h4>
<p>Ici, le premier exemple de programme consiste à afficher le code, qui forme un concept de base en ligne.</p>
<p><strong>Code :</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<em># Display the sum</em><br>
<strong>program adds two numbers</strong><br>
<pre class="brush:php;toolbar:false">
<code>
nu1 = 2.5
nu2 = 5.3
sum = float(nu1) + float(nu2)
print('The sum of two num {0} and {1} is {2}'.format(nu1, nu2, sum))</code> 



 output from a program

input

Variable declaration


La sortie générée est donnée ci-dessous car elle affiche le contenu du code du programme et la sortie à l'aide du  balise sur la page Web. Pour envelopper plusieurs lignes d'un fragment, le code informatique 
 L'élément a été utilisé ci-dessous.</p>
<p><strong>Sortie :</strong></p>
<p><img  src="https://img.php.cn/upload/article/000/000/000/172543853827005.png" alt="Balise de code HTML" ></p>
<p>Utilisation de plusieurs <code> élément dans le même programme.</p>
<p><strong>Code :</strong></p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<body>
<h1>Various Programming language</h1>
<h2> Java</h2>
<code>
import java.io.*;<br>
System.out.println();
</code>
<h2>C programming</h2>
<code>
#include <stdio.h><br>
void main()<br>
printf()
</code>
</body>
</html>
Nous avons un petit instantané de code qui affiche des exemples de programmation Java et C sur une page Web pour le code ci-dessus.
Sortie :

Exemple n°2
Le deuxième exemple montre un exemple de programme qui affiche le code aligné au centre.
Code :


<!DOCTYPE html>
<html>
<body>
<code>
<center>
x = 3;
y = 2;
c = "To add a program";
</center>
</code>
</body>
</html>
Sortie :

Exemple #3
Ici en plus, j'ai inclus 
 concept pour afficher le programme avec le contenu de la description (pour donner des informations sémantiques). Même nous pouvons ajouter n'importe quel code de fonction entre eux pour bénéficier des avantages des programmes.
Code :
<!DOCTYPE html>
<h1>Demo of article tag</h1>
<p>The <code> fact()</code> this method is used to calculate a factorial of a given number.</p>
Code :
code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
Sortie :

Exemple n°4
Format de code HTML utilisant href linkOutput.
Code :
<!DOCTYPE html>
<h1>Demo of code tag</h1>
<p>This is an implementaion of a <a href="http://www.educba.com" title="online tutorial"><code>link to edu</code></a> displayed with code tag.</p>
Code :
code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
Sortie :



Exemple #5
Pour faire un code correctement et pour regarder et lire la mode, nous devons utiliser