简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

Balise de code HTML

PHPz
Libérer： 2024-09-04 16:28:53
original
784 Les gens l'ont consulté

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>
Copier après la connexion

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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
Copier après la connexion

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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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>
Copier après la connexion

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 :

Balise de code HTML

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>
Copier après la connexion

Sortie :

Balise de code HTML

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>
Copier après la connexion

Code :

code {
background-color: #8A2BE2;
border-radius: 2px;
font-family: "Courier New", monospace;
padding: 0 4px;
}
Copier après la connexion

Sortie :

Balise de code HTML

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>
Copier après la connexion

Code :

code {
background-color: #6495ED;
border-radius: 5px;
font-family: "italic", monospace;
padding: 1 5px;
}
Copier après la connexion

Sortie :

Balise de code HTML

Exemple #5

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